Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
#canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("http://www.devanswer.com/img/winter_scene.jpg") no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<canvas id="canvas"></canvas><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particlesArray;
let mouse = {
x: undefined,
y: undefined,
radius: 100
};
window.addEventListener("mousemove", (e) => {
mouse.x = e.x;
mouse.y = e.y;
});
window.addEventListener("mouseout", () => {
mouse.x = undefined;
mouse.y = undefined;
});
class Particles {
constructor(x, y, directionX, directionY, size, color) {
this.x = x;
this.y = y;
this.directionX = directionX;
this.directionY = directionY;
this.size = size;
this.color = color;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
ctx.shadowBlur = 20;
ctx.shadowColor = this.color;
ctx.fillStyle = this.color;
ctx.fill();
}
update() {
this.size -= 0.01;
if (this.size < 0) {
// this.x = (mouse.x + ((Math.random() * 20) - 10));
// this.y = (mouse.y + ((Math.random() * 20) - 10));
this.size = Math.random() * 7;
this.x = Math.random() * (innerWidth - this.size * 2);
this.y = 0;
this.directionX = Math.random() * 3 - 1.5;
this.directionY = Math.random() * 10 + 0.1;
}
this.x += this.directionX;
this.y += this.directionY;
let dx = mouse.x - this.x;
let dy = mouse.y - this.y;
let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < mouse.radius + this.size) {
if (mouse.x < this.x && this.x < canvas.width - this.size * 10) {
this.x += 10;
}
if (mouse.x > this.x && this.x > this.size * 10) {
this.x -= 10;
}
if (mouse.y < this.y && this.y < canvas.height - this.size * 10) {
this.y += 10;
}
if (mouse.y > this.y && this.y > this.size * 10) {
this.y -= 10;
}
}
this.draw();
}
}
function init() {
particlesArray = [];
for (let i = 0; i < 200; i++) {
let size = Math.random() * 5 + 1;
let x = Math.random() * (innerWidth - size * 2);
let y = Math.random() * (innerHeight - size * 2);
let directionX = Math.random() * 5 - 2.5;
let directionY = Math.random() * 2.5 + 2.5;
// let color = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
let color = "white";
particlesArray.push(
new Particles(x, y, directionX, directionY, size, color)
);
}
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ctx.fillStyle = `rgba(0, 0, 0, .1)`;
// ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particlesArray.length; i++) {
particlesArray[i].update();
}
}
init();
animate();
window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
init();
});
</script>
</body>
</html>
