Dateien nach "assets/js" hochladen

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