In this code snowflakes fall from the top of your website page to the bottom of the page. If the mouse cursor hits these snowflakes, the snowflakes will escape. You can use this code for the background of tourism and hotel reservation websites and make your website more beautiful.
HTML
<!-- This script got from www.devanswer.com -->
<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>
CSS
@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;
}Javascript
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();
});