MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
document.addEventListener("DOMContentLoaded", function () { | document.addEventListener("DOMContentLoaded", function () { | ||
var container = document.body; | |||
var numberOfSnowflakes = 50; | |||
var maxAccumulatedHeight = 200; | |||
var accumulatedHeight = 0; | |||
for ( | for (var i = 0; i < numberOfSnowflakes; i++) { | ||
createSnowflake(); | createSnowflake(); | ||
} | } | ||
function createSnowflake() { | function createSnowflake() { | ||
var snowflake = document.createElement("div"); | |||
snowflake.className = "snowflake"; | snowflake.className = "snowflake"; | ||
container.appendChild(snowflake); | container.appendChild(snowflake); | ||
var startX = Math.random() * window.innerWidth; | |||
var startY = Math.random() * window.innerHeight; | |||
snowflake.style.left = | snowflake.style.left = startX + "px"; | ||
snowflake.style.top = | snowflake.style.top = startY + "px"; | ||
var size = Math.random() * 5 + 3; | |||
snowflake.style.width = | snowflake.style.width = size + "px"; | ||
snowflake.style.height = | snowflake.style.height = size + "px"; | ||
animateSnowflake(snowflake); | animateSnowflake(snowflake); | ||
Line 29: | Line 29: | ||
function animateSnowflake(snowflake) { | function animateSnowflake(snowflake) { | ||
var speed = 1 + Math.random() * 2; | |||
function moveSnowflake() { | function moveSnowflake() { | ||
var currentTop = parseFloat(snowflake.style.top); | |||
var newTop = currentTop + speed; | |||
snowflake.style.top = | snowflake.style.top = newTop + "px"; | ||
if (newTop > window.innerHeight) { | if (newTop > window.innerHeight) { | ||
accumulatedHeight += window.innerHeight; | accumulatedHeight += window.innerHeight; | ||
snowflake.style.top = | snowflake.style.top = -accumulatedHeight + "px"; | ||
snowflake.style.left = | snowflake.style.left = Math.random() * window.innerWidth + "px"; | ||
if (accumulatedHeight >= maxAccumulatedHeight) { | if (accumulatedHeight >= maxAccumulatedHeight) { |
Revision as of 22:55, 4 December 2023
/* Any JavaScript here will be loaded for all users on every page load. */ 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(); } });