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