Dateien nach "assets/js" hochladen

2025-12-10 09:32:40 +00:00
parent abe3680ab8
commit 190a879e0c
7 changed files with 281 additions and 0 deletions
--- a/assets/js/balloons.js
+++ b/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);