var canvas = document.querySelector('canvas');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
var context = canvas.getContext('2d');
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(event){
mouse.x = event.x;
mouse.y = event.y;
});
function Circle(x, y, dx, dy, radius, bg){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.defaultRadius = radius;
this.bg = bg;
this.draw = function(){
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
context.fillStyle = this.bg;
context.fill();
}
this.update = function(){
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.dy = -this.dy;
}
if (this.x - mouse.x < 50 && this.x - mouse.x > -50 && this.y - mouse.y < 50 && this.y - mouse.y > -50) {
if (this.radius < 30) {
this.radius += 5;
}
} else {
if (this.radius > this.defaultRadius) {
this.radius -= 1;
}
}
this.x += this.dx;
this.y += this.dy;
this.draw();
}
}
var circlesArray = [];
for(var i = 0; i < 300; i++){
addNewCircle();
}
function addNewCircle(){
var radius = (Math.random() * 2) + 1;
var x = (Math.random() * (innerWidth - (radius*2))) + radius;
var y = (Math.random() * (innerHeight - (radius*2))) + radius;
var dx = Math.random() - 0.5;
var dy = Math.random() - 0.5;
var bg = 'rgba(255, 255, 255, 0.1)';
circlesArray.push(new Circle(x, y, dx, dy, radius, bg));
}
function animate(){
requestAnimationFrame(animate);
context.clearRect(0, 0, innerWidth, innerHeight);
for(var i = 0; i < circlesArray.length; i++){
circlesArray[i].update();
}
}
animate();
*{
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin: 0;
padding: 0;
color: rgba(0,0,0, 0.8);
}
#page{
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
}
#page canvas{
position: absolute;
top: 0;
left: 0;
}
#top-bar{
width: 100%;
height: 200px;
background: black;
}
<!DOCTYPE html>
<html>
<body>
<div id="page">
<canvas></canvas>
</div>
<div id="top-bar">
</div>
</body>
</html>
