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(); } });