JSFiddle - React, Tailwind, and code Playground
HTML
<center><div style="color:#555;font-size:25px;text-alighn:center;padding-top:20%;">IMAPO.RU</div></center>
<canvas id="cvs" height="500" width="1920"></canvas>
CSS
body {
background: #000;
min-height:500px;
}
#cvs {
position: fixed;
top:0px;
left:0px;
z-index:-1;
}
JavaScript
/************* SHIM ************************/
window.requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
/********************************************/
var canvas = document.getElementById('cvs'),
ctx = canvas.getContext('2d'),
height = canvas.height = document.body.offsetHeight,
width = canvas.width = document.body.offsetWidth,
collection = [],
num_drops = 500, // number of drops
gravity = 1, // gravity multiplier
windforce = 5, // yea i'd just leave this
windmultiplier = 5, // this freaks out on large numbers
maxspeed = 3, // this is so you never run too fast (it is a multiplier not raw)
gutter = 0; // the percentage distance to travel off screen before wrapping
function Drop() {
this.x;
this.y;
this.radius;
this.distance;
this.color;
this.speed;
this.vx;
this.vy;
}
Drop.prototype = {
constructor: Drop,
random_x: function () {
var n = width * (1 + gutter);
return (1 - (1 + gutter)) + (Math.random() * n);
},
draw: function (ctx) {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
};
function draw_frame() {
// this was recommended (see comments)
// check it out, just comment out the
// ctx.clearRect(0, 0, width, height);
// line and uncomment the three below:
//ctx.globalCompositeOperation="darker";
//ctx.fillStyle="rgba(0,0,0,0.5)";
//ctx.fillRect(0,0,width,height);
ctx.clearRect(0, 0, width, height);
// in a previous attempt I even go as far
// as to ensure i'm drawing the furthest particles
// first for the z-index overlay.
// in...