Snowfall (Frontend) - Druckversion

Code:
document.addEventListener("DOMContentLoaded", function() {

    // Hier kannst du die Seiten definieren, auf denen der Schneefall-Effekt angezeigt werden soll,

    // Zum Beispiel "/index.php".

    var allowedPages = ["/", "/portal.php"];



    // Überprüfe, ob die aktuelle Seite in der erlaubten Liste ist.

    if (allowedPages.includes(window.location.pathname)) {

        var currentDate = new Date();

        var startDate = new Date("2023-11-30"); // Wann Starten...

        var endDate = new Date("2024-02-01");    // Wann zu Ende...



        if (currentDate >= startDate && currentDate <= endDate) {

            createSnowfallEffect();

        }

    }

});



function createSnowfallEffect() {

    var flakeCount = 50;                    // Die Anzahl der Schneeflocken.

    var minSize = 10;                        // Die Minimale Größe der Schneeflocken.

    var maxSize = 30;                        // Die Maximale Größe der Schneeflocken.

    var flakeOptions = ["❄️", "❅", "❆"];     // Welche Unicode-Optionen für Schneeflocken.

    var flakeColor = "#ffffff";                // Definiert die Farbe der Schneeflocken.



    function getRandomFlake() {

        return flakeOptions[Math.floor(Math.random() * flakeOptions.length)];

    }



    // Ab Hier nichts mehr verändern.

    function createFlake() {

        var flake = document.createElement("div");

        flake.innerHTML = getRandomFlake();

        flake.style = `

            position: fixed;

            color: ${flakeColor};

            pointer-events: none;

            z-index: 9999;

            left: ${Math.random() * window.innerWidth}px;

            top: -30px;

            font-size: ${Math.floor(Math.random() * (maxSize - minSize + 1)) + minSize}px;

        `;



        document.body.appendChild(flake);

        moveFlake(flake);

    }



    function moveFlake(flake) {

        var startY = -30;

        var speed = 1 + Math.random() * 2;



        function update() {

            startY += speed;

            flake.style.top = startY + "px";



            if (startY > window.innerHeight) {

                startY = -30;

                flake.style.left = Math.random() * window.innerWidth + "px";

            }

        }



        flake.interval = setInterval(update, 30);

    }



    function createFlakes() {

        for (var i = 0; i < flakeCount; i++) {

            createFlake();

        }

    }



    createFlakes();

}