MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| 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++) { | |||
for ( | |||
createSnowflake(); | createSnowflake(); | ||
} | } | ||
function createSnowflake() { | function createSnowflake() { | ||
const snowflake = document.createElement("div"); | |||
snowflake.className = "snowflake"; | snowflake.className = "snowflake"; | ||
container.appendChild(snowflake); | container.appendChild(snowflake); | ||
const startX = Math.random() * window.innerWidth; | |||
snowflake.style.width = size | const startY = Math.random() * window.innerHeight; | ||
snowflake.style.height = size | |||
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); | animateSnowflake(snowflake); | ||
| Line 25: | Line 28: | ||
function animateSnowflake(snowflake) { | function animateSnowflake(snowflake) { | ||
const speed = 1 + Math.random() * 2; | |||
function moveSnowflake() { | function moveSnowflake() { | ||
const currentTop = parseFloat(snowflake.style.top); | |||
const newTop = currentTop + speed; | |||
snowflake.style.top = newTop | snowflake.style.top = `${newTop}px`; | ||
if (newTop > window.innerHeight) { | if (newTop > window.innerHeight + window.pageYOffset) { | ||
accumulatedHeight += window.innerHeight; | accumulatedHeight += window.innerHeight; | ||
snowflake.style.top = -accumulatedHeight | snowflake.style.top = `-${accumulatedHeight}px`; | ||
snowflake.style.left = Math.random() * window.innerWidth | snowflake.style.left = `${Math.random() * window.innerWidth}px`; | ||
if (accumulatedHeight >= maxAccumulatedHeight) { | if (accumulatedHeight >= maxAccumulatedHeight) { | ||
| Line 48: | Line 51: | ||
moveSnowflake(); | moveSnowflake(); | ||
} | } | ||
} | }); | ||
Revision as of 23:01, 4 December 2023
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();
}
});