Animated backgrounds make your website livelier and more beautiful, like the code that fireflies are moving in the background of the website. Using this code on a dark background makes the movement of fireflies more natural at night.
HTML
<!-- This script got from www.devanswer.com -->
<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
body,
html {
margin: 0px;
padding: 0px;
position: fixed;
background-image: url('http://www.devanswer.com/img/image-back.png');
background-size: cover;
}
canvas {
filter: blur(1px);
}Javascript
let c = init("canvas"),
w = (canvas.width = window.innerWidth),
h = (canvas.height = window.innerHeight);
class firefly {
constructor() {
this.x = Math.random() * w;
this.y = Math.random() * h;
this.s = Math.random() * 2;
this.ang = Math.random() * 2 * Math.PI;
this.v = this.s * this.s / 4;
}
move() {
this.x += this.v * Math.cos(this.ang);
this.y += this.v * Math.sin(this.ang);
this.ang += Math.random() * 20 * Math.PI / 180 - 10 * Math.PI / 180;
}
show() {
c.beginPath();
c.arc(this.x, this.y, this.s, 0, 2 * Math.PI);
c.fillStyle = "#fddba3";
c.fill();
}
}
let f = [];
function draw() {
if (f.length < 100) {
for (let j = 0; j < 10; j++) {
f.push(new firefly());
}
}
//animation
for (let i = 0; i < f.length; i++) {
f[i].move();
f[i].show();
if (f[i].x < 0 || f[i].x > w || f[i].y < 0 || f[i].y > h) {
f.splice(i, 1);
}
}
}
let mouse = {};
let last_mouse = {};
canvas.addEventListener(
"mousemove",
function (e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
},
false
);
function init(elemid) {
let canvas = document.getElementById(elemid),
c = canvas.getContext("2d"),
w = (canvas.width = window.innerWidth),
h = (canvas.height = window.innerHeight);
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
return c;
}
window.requestAnimFrame = (function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback);
}
);
});
function loop() {
window.requestAnimFrame(loop);
c.clearRect(0, 0, w, h);
draw();
}
window.addEventListener("resize", function () {
(w = canvas.width = window.innerWidth),
(h = canvas.height = window.innerHeight);
loop();
});
loop();
setInterval(loop, 1000 / 60);
