MediaWiki:Common.js: Difference between revisions

From Tony Chase
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
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 () {
/* MediaWiki:SnowEffect.css */
            const container = document.body;


            function createSnowflake() {
/* Snowflake styling */
                const snowflake = document.createElement("div");
.snowflake {
                snowflake.className = "snowflake";
    position: fixed;
                snowflake.innerHTML = "❄";
    width: 10px;
                container.appendChild(snowflake);
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    pointer-events: none;
    animation: snowfall linear infinite;
}


                const animationDuration = Math.random() * 3 + 2; // between 2 and 5 seconds
/* Animation */
                snowflake.style.animation = `fall ${animationDuration}s linear infinite`;
@keyframes snowfall {
 
    0% {
                const startX = Math.random() * window.innerWidth;
        transform: translateY(0);
                snowflake.style.left = `${startX}px`;
    }
 
    100% {
                const endX = Math.random() * window.innerWidth;
        transform: translateY(100vh);
                const rotation = Math.random() * 360;
    }
                snowflake.style.transform = `translate(${endX}px, ${window.innerHeight}px) rotate(${rotation}deg)`;
}
            }
 
            function createSnowflakes(quantity) {
                for (let i = 0; i < quantity; i++) {
                    createSnowflake();
                }
            }
 
            createSnowflakes(50); // Adjust the quantity of snowflakes as needed
        });

Revision as of 22:33, 4 December 2023

/* Any JavaScript here will be loaded for all users on every page load. */
/* MediaWiki:SnowEffect.css */

/* Snowflake styling */
.snowflake {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    pointer-events: none;
    animation: snowfall linear infinite;
}

/* Animation */
@keyframes snowfall {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100vh);
    }
}
Retrieved from "http://wiki.tonychasearchive.com/index.php?title=MediaWiki:Common.js&oldid=780"