document.addEventListener("DOMContentLoaded", function () {
const numFlakes = 50;
const snowContainer = document.createElement("div");
snowContainer.style.position = "fixed";
snowContainer.style.top = "0";
snowContainer.style.left = "0";
snowContainer.style.width = "100vw";
snowContainer.style.height = "100vh";
snowContainer.style.pointerEvents = "none";
snowContainer.style.zIndex = "9999";
document.body.appendChild(snowContainer);
let flakes = [];
for (let i = 0; i < numFlakes; i++) {
let flake = document.createElement("div");
flake.style.position = "absolute";
flake.style.top = `${Math.random() * window.innerHeight}px`...
document.addEventListener("DOMContentLoaded", function () {
const numFlakes = 50;
const snowContainer = document.createElement("div");
snowContainer.style.position = "fixed";
snowContainer.style.top = "0";
snowContainer.style.left = "0";
snowContainer.style.width = "100vw";
snowContainer.style.height = "100vh";
snowContainer.style.pointerEvents = "none";
snowContainer.style.zIndex = "9999";
document.body.appendChild(snowContainer);
let flakes = [];
for (let i = 0; i < numFlakes; i++) {
let flake = document.createElement("div");
flake.style.position = "absolute";
flake.style.top = `${Math.random() * window.innerHeight}px`;
flake.style.left = `${Math.random() * window.innerWidth}px`;
flake.style.width = `${Math.random() * 4 + 2}px`;
flake.style.height = flake.style.width;
flake.style.background = "white";
flake.style.borderRadius = "50%";
flake.style.opacity = Math.random() * 0.7 + 0.3;
flake.dataset.speed = Math.random() * 1.5 + 0.5;
flake.dataset.xSpeed = (Math.random() - 0.5) * 0.5;
snowContainer.appendChild(flake);
flakes.push(flake);
}
function animateSnowfall() {
flakes.forEach(flake => {
let top = parseFloat(flake.style.top);
let left = parseFloat(flake.style.left);
let speed = parseFloat(flake.dataset.speed);
let xSpeed = parseFloat(flake.dataset.xSpeed);
top += speed;
left += xSpeed;
if (top > window.innerHeight) {
top = -10;
left = Math.random() * window.innerWidth;
}
flake.style.top = `${top}px`;
flake.style.left = `${left}px`;
});
requestAnimationFrame(animateSnowfall);
}
animateSnowfall();
});
<script src="/js/snow.js"></script>