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


     for (let i = 0; i < numberOfSnowflakes; i++) {
     for (var i = 0; i < numberOfSnowflakes; i++) {
         createSnowflake();
         createSnowflake();
     }
     }


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


         const startX = Math.random() * window.innerWidth;
         var startX = Math.random() * window.innerWidth;
         const startY = Math.random() * window.innerHeight;
         var startY = Math.random() * window.innerHeight;


         snowflake.style.left = `${startX}px`;
         snowflake.style.left = startX + "px";
         snowflake.style.top = `${startY}px`;
         snowflake.style.top = startY + "px";


         const size = Math.random() * 5 + 3;
         var size = Math.random() * 5 + 3;
         snowflake.style.width = `${size}px`;
         snowflake.style.width = size + "px";
         snowflake.style.height = `${size}px`;
         snowflake.style.height = size + "px";


         animateSnowflake(snowflake);
         animateSnowflake(snowflake);
Line 28: Line 28:


     function animateSnowflake(snowflake) {
     function animateSnowflake(snowflake) {
         const speed = 1 + Math.random() * 2;
         var speed = 1 + Math.random() * 2;


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


             snowflake.style.top = `${newTop}px`;
             snowflake.style.top = newTop + "px";


             if (newTop > window.innerHeight + window.pageYOffset) {
             if (newTop > window.innerHeight) {
                 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) {

Revision as of 23:03, 4 December 2023

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