<span>
<p><b><i>Blowy Snow</i></b></p>
</span>
body {
background-image: radial-gradient(ellipse farthest-corner at center bottom, rgba(255,5,5,0.6) 5%, #000 100%);
background-color:#000;
background-size: 100% 100%;
background-attachment: fixed;
}
span {
display: inline-block;
position: relative;
padding: 4px;
width: 200px;
background-color: #770000;
border-radius: 5px;
font: 20px verdana;
color: #fff;
text-align: center;
}
p {
margin: 5px;
}
(function(){
//Blowy Snow
var flakeNum = 250;
var pic = new Image(20,20);
pic.src = "https://lenger.kz/uploads/web/png.webp";
var d = document;
var deg = 180/3.14;
var rad = 3.14/180;
var idx = (typeof d.getElementsByTagName != "undefined")?d.getElementsByTagName('div').length:0;
var f = {w:0,h:0,cx:0,cy:0,flake:[],x:[],y:[],cutRight:[],cutLeft:[],dst:[],size:[],vel:[],acc:[],blo:[],rate:[],rng:[],ang:[],counter:[]}
var con = d.createElement('div');
con.setAttribute('style','display:block;'
+'position:fixed;'
+'height:100%;width:100%;'
+'margin:auto;padding:0px;'
+'top:0;left:0;left:0;right:0;'
+'overflow:hidden;'
+'visibility:hidden;');
d.body.appendChild(con);
for (var i = 0; i < flakeNum; i++) {
f.counter[i] = 0;
var img = d.createElement('img');
img.setAttribute('id','flake'+(idx+i));
img.setAttribute('src',pic.src);
img.setAttribute('style','display:none;'
+'position:absolute;'
+'transform: translate3d(0px,0px,0)'
+'height:5vh;width:5vh;'
+'visibility:visible;');
con.appendChild(img);
}
function win() {
var ddw = d.documentElement.clientWidth;
var ddh = d.documentElement.clientHeight;
var scrollBarRight = (typeof ddw == 'number') ? window.innerWidth - ddw : 0;
var scrollBarBottom = (typeof ddh == 'number') ? window.innerHeight - ddh : 0;
f.h = window.innerHeight - scrollBarBottom -1;
f.w = window.innerWidth - scrollBarRight -1;
f.cy = f.h/2|0;
f.cx = f.w/2|0;
}
function rsz() {
win();
for (var i = 0; i < flakeNum; i++) {
f.flake[i].style.display = 'none';
f.counter[i] = 0;
rst(i);
}
}
window.addEventListener("resize", rsz, false);
function rst(s) {
if (f.counter[s] > 1) {
f.flake[s].style.display = 'block';
}
if (f.counter[s] < 2) {
f.counter[s]++;
}
f.cutLeft[s] = 0 + Math.random() * f.cx/2;
f.cutRight[s] = f.w - Math.random() * f.cx/2;
f.y[s] = 0 + Math.random() * f.h;
f.x[s] = (f.cx - f.cx/3) + Math.random() * f.cx/1.5;
f.rng[s] = f.cx-100 + Math.random() * 200;
var dy = (f.y[s] - f.cy/6);
var dx = (f.x[s] - f.rng[s]);
f.ang[s] = Math.atan2(dy,dx) * deg;
f.dst[s] = 5 + (Math.sqrt(dy*dy + dx*dx));
f.size[s] = 0.1;
f.acc[s] = 0;
f.blo[s] = 0;
f.vel[s] = (1.8 * (f.dst[s] / 2) / 100);
f.rate[s] = (-0.01 + Math.random() * 0.02);
}
function animate() {
for (var i = 0; i < flakeNum; i++){
f.y[i] += f.vel[i] * Math.sin((f.ang[i]) * rad);
f.x[i] += f.vel[i] * Math.cos((f.ang[i]+=f.blo[i]) * rad);
f.acc[i] = (f.vel[i] / (f.dst[i] + (400 * f.vel[i] / 100)) * f.vel[i]);
f.vel[i] += f.acc[i];
f.size[i] += ((f.vel[i] * 0.6) / (190 * f.dst[i] / 100));
f.blo[i] += f.rate[i];
if (f.y[i] < -f.cy/2) {
f.ang[i] *= -1;
}
if (f.x[i]+f.size[i] < f.cutLeft[i] || f.x[i] > f.cutRight[i] || f.y[i] > f.h || f.x[i] > f.w || f.x[i]+f.size[i] < 0){
rst(i);
}
f.flake[i].style.transform = 'translate3d('+f.x[i]+'px, '+f.y[i]+'px,0) scale('+f.size[i]+')';
}
}
function run() {
requestAnimationFrame(run);
animate();
}
function init() {
win();
for (var i = 0; i < flakeNum; i++){
f.flake[i] = d.getElementById("flake"+(idx+i));
rst(i);
}
run();
}
window.addEventListener("load",init,false);
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.