<script>
document.addEventListener("DOMContentLoaded", function() {
var styleSheet;
const style = document.createElement('style');
document.head.appendChild(style);
styleSheet = style.sheet;
styleSheet.insertRule(`
.iisnowflake {
width: 4px;
height: 4px;
border-radius: 2px;
background: #ddf;
position: absolute;
}
`, styleSheet.cssRules.length);
styleSheet.insertRule(`
.iisnowflakes {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100vw;
height: 100vh;
position: fixed;
pointer-events: none;
}
`, styleSheet.cssRules.length);
var iisnowflakes = document.createElement("div");
iisnowflakes.classList.add('iisnowflakes');
document.body.appendChild(iisnowflakes);
var show = true;
const maxflakes = Math.floor(Math.sqrt(window.innerWidth*window.innerHeight)/6);
var flakes = [];
window.addEventListener("resize", e => {
flakes.forEach(el=> el.element.remove());
flakes=[]
});
class Flake {
constructor(container = iisnowflakes) {
this.rect = container.getBoundingClientRect();
this.x = Math.random() * this.rect.width;
this.y = Math.random() * this.rect.height;
this.opacity = 0;
this.maxopacity = Math.random() * 0.5 + 0.2;
this.dy = Math.random() + 0.3;
this.dx = Math.random() - 0.5;
this.element = document.createElement("div");
this.element.classList.add("iisnowflake");
this.element.style.opacity = this.opacity;
container.appendChild(this.element);
}
move(angle) {
this.x = this.x + this.dx + Math.sin(angle);
this.y = this.y + this.dy;
if (this.opacity < this.maxopacity) {
this.opacity+=0.01;
this.element.style.opacity = this.opacity;
}
if (this.y > this.rect.height)
this.y = -4;
if ( this.x < -4 )
this.x = this.rect.width;
if ( this.x > this.rect.width )
this.x = -4;
this.element.style.top = this.y + "px";
this.element.style.left = this.x + "px";
}
}
var angle = 0;
function loop() {
angle += 0.005;
if (flakes.length < maxflakes) {
flakes.push(new Flake());
}
if (show) {
flakes.forEach((element)=>{
element.move(angle);
})
window.requestAnimationFrame(loop);
}
}
loop();
});
</script>