Dateien nach "assets/js" hochladen

assets/js/balloons.js

@@ -0,0 +1,51 @@
+(function($) {
+    // Nur ausführen, wenn die Body-Klasse vorhanden ist
+    if (!$('body').hasClass('festive-birthday')) {
+        return;
+    }
+
+    const colors = [
+        '#e74c3c', '#3498db', '#2ecc71', '#f1c40f', '#e67e22', '#9b59b6', '#1abc9c', '#34495e', '#f39c12', '#d35400',
+        '#FFB6C1', '#ADD8E6', '#98FB98', '#F0E68C', '#DDA0DD', '#FFD700', '#C0C0C0'
+    ];
+
+    function createBalloon() {
+        const size = 60 + Math.random() * 60;
+        const duration = 12 + Math.random() * 8;
+        const startX = Math.random() * 100;
+        const selectedColor = colors[Math.floor(Math.random() * colors.length)];
+
+        // Der SVG-Code für einen Ballon
+        const svgCode = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" width="' + size + '" height="' + (size * 1.2) + '">' +
+            '<path d="M50 10 C70 10, 90 30, 90 55 C90 80, 70 100, 50 100 C30 100, 10 80, 10 55 C10 30, 30 10, 50 10 Z" fill="' + selectedColor + '" stroke="#333" stroke-width="0.5"/>' +
+            '<path d="M50 100 L45 110 L55 110 Z" fill="' + selectedColor + '"/>' +
+            '<line x1="50" y1="110" x2="50" y2="120" stroke="#333" stroke-width="1"/>' +
+            '</svg>';
+
+        // Wir erstellen ein <img>-Element und setzen den SVG-Code als src
+        const $balloon = $('<img>').attr('src', 'data:image/svg+xml;base64,' + btoa(svgCode)).css({
+            position: 'fixed',
+            bottom: '-200px',
+            left: startX + '%',
+            zIndex: 999999,
+            pointerEvents: 'none',
+            userSelect: 'none',
+            transform: 'translateX(-50%)',
+            opacity: 0.9
+        });
+
+        $('body').append($balloon);
+
+        $balloon.animate({ bottom: '120vh' }, {
+            duration: duration * 1000,
+            easing: 'linear',
+            complete: function() {
+                $(this).remove();
+            }
+        });
+    }
+
+    createBalloon();
+    setInterval(createBalloon, 1200);
+
+})(jQuery);

assets/js/christmas-star.js

@@ -0,0 +1,47 @@
+(function($) {
+    // Nur ausführen, wenn die Body-Klasse vorhanden ist
+    if (!$('body').hasClass('festive-christmas')) {
+        return;
+    }
+
+    const pluginUrl = fsp_vars.plugin_url;
+
+    function createStar() {
+        const $star = $('<img>').attr('src', pluginUrl + 'assets/img/gold-star.png').css({
+            position: 'fixed',
+            width: '80px',
+            top: Math.random() * 80 + '%',
+            left: Math.random() * 80 + '%',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            opacity: 0,
+            transform: 'translate(-50%, -50%) scale(0.5)'
+        });
+
+        $('body').append($star);
+
+        // Einblenden und pulsieren
+        $star.animate({
+            opacity: 1,
+            transform: 'translate(-50%, -50%) scale(1)'
+        }, 1000, function() {
+            $(this).animate({ transform: 'translate(-50%, -50%) scale(1.2)' }, 800).animate({ transform: 'translate(-50%, -50%) scale(1)' }, 800);
+        });
+
+        // Nach 10 Sekunden ausblenden und entfernen
+        setTimeout(function() {
+            $star.fadeOut(1000, function() {
+                $(this).remove();
+            });
+        }, 10000);
+    }
+
+    // Erstelle einen anfänglichen "Burst" von 3 Sternen
+    for (let i = 0; i < 3; i++) {
+        setTimeout(createStar, i * 500);
+    }
+    
+    // Erstelle dann regelmäßig neue Sterne in kürzeren Abständen
+    setInterval(createStar, 3000);
+
+})(jQuery);

assets/js/easter-eggs.js

@@ -0,0 +1,42 @@
+(function($) {
+    // Skript nur ausführen, wenn die body-Klasse 'festive-easter' vorhanden ist
+    if (!$('body').hasClass('festive-easter')) {
+        return;
+    }
+
+    // Pfad zum Plugin-Verzeichnis wird von PHP übergeben (siehe wp_localize_script)
+    const pluginUrl = fsp_vars.plugin_url;
+
+    const eggImages = [
+        pluginUrl + 'assets/img/easter-egg-1.png',
+        pluginUrl + 'assets/img/easter-egg-2.png',
+        pluginUrl + 'assets/img/easter-egg-3.png',
+        pluginUrl + 'assets/img/easter-egg-4.png',
+        pluginUrl + 'assets/img/easter-egg-5.png',
+        pluginUrl + 'assets/img/easter-egg-6.png',
+        pluginUrl + 'assets/img/easter-egg-7.png',
+        pluginUrl + 'assets/img/easter-egg-8.png',
+        pluginUrl + 'assets/img/easter-egg-9.png'
+    ];
+
+    function createEgg() {
+        const randomEgg = eggImages[Math.floor(Math.random() * eggImages.length)];
+        const $egg = $('<img>').attr('src', randomEgg).css({
+            position: 'fixed',
+            width: '60px',
+            left: Math.random() * 100 + '%',
+            top: '-80px',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            transform: 'translateX(-50%)'
+        });
+
+        $('body').append($egg);
+
+        $egg.animate({ top: '110vh' }, 7000, 'linear', function() {
+            $(this).remove();
+        });
+    }
+
+    setInterval(createEgg, 900);
+})(jQuery);

assets/js/halloween-spiders.js

@@ -0,0 +1,54 @@
+(function($) {
+    // Skript nur ausführen, wenn die body-Klasse 'festive-halloween' vorhanden ist
+    if (!$('body').hasClass('festive-halloween')) {
+        return;
+    }
+
+    // Pfad zum Plugin-Verzeichnis wird von PHP übergeben (siehe wp_localize_script)
+    const pluginUrl = fsp_vars.plugin_url;
+
+    function createSpider() {
+        // Zufällige Spinne auswählen (spider-1.png bis spider-6.png)
+        const spiderNum = Math.floor(Math.random() * 6) + 1;
+
+        // Größe zwischen 50px und 130px
+        const size = 50 + Math.random() * 80;
+
+        // Dauer zwischen 18 und 26 Sekunden
+        const duration = 18000 + Math.random() * 8000;
+
+        // Zufällige Startposition an der Oberkante des Bildschirms
+        const startX = Math.random() * $(window).width();
+
+        // Spinne als jQuery-Objekt erstellen
+        const $spider = $('<img>')
+            .attr('src', pluginUrl + 'assets/img/spider-' + spiderNum + '.png')
+            .css({
+                position: 'fixed',
+                width: size + 'px',
+                top: '-100px',
+                left: startX + 'px',
+                zIndex: 9999,
+                pointerEvents: 'none'
+            });
+
+        $('body').append($spider);
+
+        // Animation: Fall nach unten
+        $spider.animate({
+            top: $(window).height() + 100
+        }, {
+            duration: duration,
+            easing: 'linear',
+            complete: function() {
+                $(this).remove();
+            }
+        });
+    }
+
+    // Erste Spinne sofort starten
+    createSpider();
+    // Alle 2 Sekunden eine neue Spinne erstellen
+    setInterval(createSpider, 2000);
+
+})(jQuery);

assets/js/santa-sleigh.js

@@ -0,0 +1,42 @@
+(function($) {
+    // Nur ausführen, wenn die Body-Klasse vorhanden ist
+    if (!$('body').hasClass('festive-christmas')) {
+        return;
+    }
+
+    const pluginUrl = fsp_vars.plugin_url;
+
+    function createSanta() {
+        const $santa = $('<img>').attr('src', pluginUrl + 'assets/img/santa-claus.png').css({
+            position: 'fixed',
+            width: '380px', // Größer gemacht
+            bottom: '-350px', // Startet weiter außerhalb des Bildschirms
+            right: '-350px', // Startet weiter außerhalb des Bildschirms
+            zIndex: 9999,
+            pointerEvents: 'none',
+            transform: 'rotate(-15deg)' // Leichte Drehung für den Flugeffekt
+        });
+
+        $('body').append($santa);
+
+        // Animation von rechts nach links über den gesamten Bildschirm
+        $santa.animate({
+            bottom: window.innerHeight * 0.6, // Fliegt in der oberen Bildschirmhälfte
+            right: window.innerWidth + 350, // Fliegt komplett aus dem Bild links raus
+            opacity: 0.4 // Wird am Ende fast durchsichtig
+        }, {
+            duration: 18000, // 18 Sekunden Flugdauer für die große Strecke
+            easing: 'linear', // Gleichmäßige Geschwindigkeit
+            complete: function() {
+                $(this).remove(); // Entfernt das Bild nach der Animation
+            }
+        });
+    }
+
+    // Ersten Santa nach 5 Sekunden starten
+    setTimeout(createSanta, 8000);
+    
+    // Alle 25 Sekunden einen neuen Santa starten
+    setInterval(createSanta, 25000);
+
+})(jQuery);

assets/js/snowstorm.js

@@ -0,0 +1,37 @@
+(function() {
+    if (!document.body.classList.contains('festive-advent') && !document.body.classList.contains('festive-christmas')) {
+        return;
+    }
+
+    const snowflakes = ['❄', '❅', '❆', '✻', '✼', '❉', '❋'];
+    const container = document.createElement('div');
+    container.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden;';
+    document.body.appendChild(container);
+
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes fall {
+            to { transform: translateY(120vh) rotate(360deg); }
+        }
+    `;
+    document.head.appendChild(style);
+
+    function createSnowflake() {
+        const flake = document.createElement('div');
+        flake.textContent = snowflakes[Math.floor(Math.random() * snowflakes.length)];
+        flake.style.cssText = `
+            position: absolute;
+            left: ${Math.random() * 100}vw;
+            top: -50px;
+            font-size: ${15 + Math.random() * 20}px;
+            color: #fff;
+            opacity: ${0.6 + Math.random() * 0.4};
+            animation: fall ${8 + Math.random() * 10}s linear;
+        `;
+        container.appendChild(flake);
+
+        setTimeout(() => flake.remove(), 18000);
+    }
+
+    setInterval(createSnowflake, 200);
+})();