MediaWiki:Common.js: Difference between revisions

From Tony Chase
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. */
document.addEventListener("DOMContentLoaded", function () {
    const container = document.body;
    const numberOfSnowflakes = 50;
    const maxAccumulatedHeight = 200;
    let accumulatedHeight = 0;


// Wrap the code in a function to avoid polluting the global namespace
     for (let i = 0; i < numberOfSnowflakes; i++) {
function initSnowfall() {
    var container = document.body;
    var numberOfSnowflakes = 50;
    var maxAccumulatedHeight = 200;
    var accumulatedHeight = 0;
 
     for (var i = 0; i < numberOfSnowflakes; i++) {
         createSnowflake();
         createSnowflake();
     }
     }


     function createSnowflake() {
     function createSnowflake() {
         var snowflake = document.createElement("div");
         const snowflake = document.createElement("div");
         snowflake.className = "snowflake";
         snowflake.className = "snowflake";
         container.appendChild(snowflake);
         container.appendChild(snowflake);


         var size = Math.random() * 5 + 3;
         const startX = Math.random() * window.innerWidth;
         snowflake.style.width = size + "px";
        const startY = Math.random() * window.innerHeight;
         snowflake.style.height = size + "px";
 
        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) {
         var speed = 1 + Math.random() * 2;
         const speed = 1 + Math.random() * 2;


         function moveSnowflake() {
         function moveSnowflake() {
             var currentTop = parseFloat(snowflake.style.top) || 0;
             const currentTop = parseFloat(snowflake.style.top);
             var newTop = currentTop + speed;
             const newTop = currentTop + speed;


             snowflake.style.top = newTop + "px";
             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 + "px";
                 snowflake.style.top = `-${accumulatedHeight}px`;
                 snowflake.style.left = Math.random() * window.innerWidth + "px";
                 snowflake.style.left = `${Math.random() * window.innerWidth}px`;


                 if (accumulatedHeight >= maxAccumulatedHeight) {
                 if (accumulatedHeight >= maxAccumulatedHeight) {
Line 48: Line 51:
         moveSnowflake();
         moveSnowflake();
     }
     }
}
});
 
// Call the initialization function when the DOM is ready
$(document).ready(initSnowfall);

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