|
|
| (5 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| document.addEventListener("DOMContentLoaded", function () {
| |
| var container = document.body;
| |
| var numberOfSnowflakes = 50;
| |
| var maxAccumulatedHeight = 200;
| |
| var accumulatedHeight = 0;
| |
|
| |
|
| for (var i = 0; i < numberOfSnowflakes; i++) {
| |
| createSnowflake();
| |
| }
| |
|
| |
| function createSnowflake() {
| |
| var snowflake = document.createElement("div");
| |
| snowflake.className = "snowflake";
| |
| container.appendChild(snowflake);
| |
|
| |
| var startX = Math.random() * window.innerWidth;
| |
| var startY = Math.random() * window.innerHeight;
| |
|
| |
| snowflake.style.left = startX + "px";
| |
| snowflake.style.top = startY + "px";
| |
|
| |
| var size = Math.random() * 5 + 3;
| |
| snowflake.style.width = size + "px";
| |
| snowflake.style.height = size + "px";
| |
|
| |
| animateSnowflake(snowflake);
| |
| }
| |
|
| |
| function animateSnowflake(snowflake) {
| |
| var speed = 1 + Math.random() * 2;
| |
|
| |
| function moveSnowflake() {
| |
| var currentTop = parseFloat(snowflake.style.top);
| |
| var newTop = currentTop + speed;
| |
|
| |
| snowflake.style.top = newTop + "px";
| |
|
| |
| if (newTop > window.innerHeight) {
| |
| accumulatedHeight += window.innerHeight;
| |
| snowflake.style.top = -accumulatedHeight + "px";
| |
| snowflake.style.left = Math.random() * window.innerWidth + "px";
| |
|
| |
| if (accumulatedHeight >= maxAccumulatedHeight) {
| |
| accumulatedHeight = 0;
| |
| }
| |
| }
| |
|
| |
| requestAnimationFrame(moveSnowflake);
| |
| }
| |
|
| |
| moveSnowflake();
| |
| }
| |
| });
| |