working easter

seperate single seasonals/Seasonals-Easter/easter.css

@@ -5,30 +5,21 @@
     overflow: hidden;
 }
 
-#rabbit img{
-    position: fixed;
-    bottom: 2px;
-    width: 100px;
-    transition: transform 0.3s ease-in-out;
-    overflow: hidden;
-}
-
 .hopping-rabbit {
-    position: absolute;
+    position: fixed;
-    bottom: 20px;
+    bottom: 10px;
-    width: 100px;
+    width: 70px;
-    animation: bunny-move 10s linear infinite, bunny-hop 1s ease-in-out infinite;
+    overflow: hidden;
+    pointer-events: none;
 }
 
-/*
+
 @media (max-width: 768px) {
-    #rabbit {
+    .hopping-rabbit {
-        width: 70px;
+        width: 60px;
-        /* Kleiner auf mobilen Geräten 
-        bottom: 10px;
     }
 }
-*/
+
 
 .easter {
     position: fixed;
@@ -41,11 +32,9 @@
     -webkit-user-select: none;
     cursor: default;
     -webkit-animation-name: easter-fall, easter-shake;
-    -webkit-animation-duration: 7s, 3s;
     -webkit-animation-timing-function: linear, ease-in-out;
     -webkit-animation-iteration-count: infinite, infinite;
     animation-name: easter-fall, easter-shake;
-    animation-duration: 7s, 3s;
     animation-timing-function: linear, ease-in-out;
     animation-iteration-count: infinite, infinite;
 }
@@ -101,23 +90,6 @@
     }
 }
 
-@keyframes bunny-move {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(100%);
-    }
-}
-
-@keyframes bunny-hop {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-30px);
-    }
-}
 
 .easter:nth-of-type(0) {
     left: 0%;

seperate single seasonals/Seasonals-Easter/easter.js

@@ -5,13 +5,14 @@ const enableDiffrentDuration = true; // enable different duration for the random
 const easterEggCount = 20; // count of random extra easter
 
 const bunny = true; // enable/disable hopping bunny
-const step = 5; // step size of the bunny
+const bunnyDuration = 12000; // duration of the bunny animation in ms
-const hopHeight = 30; // height of the bunny hop
+const hopHeight = 20; // height of the bunny hops in px
+const minBunnyRestTime = 2000; // minimum time the bunny rests in ms
+const maxBunnyRestTime = 5000; // maximum time the bunny rests in ms
 
 
 let msgPrinted = false; // flag to prevent multiple console messages
-let position = -100; // start position of the bunny
+let rabbitActive = true; // flag to control the bunny animation
-const screenWidth = window.innerWidth;
 
 // function to check and control the easter
 function toggleEaster() {
@@ -26,12 +27,16 @@ function toggleEaster() {
     // hide easter if video/trailer player is active or dashboard is visible
     if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
         easterContainer.style.display = 'none'; // hide easter
+        rabbitActive = false; // stop the bunny animation
         if (!msgPrinted) {
             console.log('Easter hidden');
             msgPrinted = true;
         }
     } else {
         easterContainer.style.display = 'block'; // show easter
+        rabbitActive = true; // start the bunny animation
+        let rabbitDiv = document.getElementById("rabbit");
+        animateRabbit(rabbitDiv);
         if (msgPrinted) {
             console.log('Easter visible');
             msgPrinted = false;
@@ -127,48 +132,6 @@ function addRandomEaster(count) {
     console.log('Random easter added');
 }
 
-/*
-function addHoppingRabbit() {
-    if (!bunny) return; // only add the bunny if bunny is enabled
-
-    const easterContainer = document.querySelector('.easter-container'); // get the leave container
-    if (!easterContainer) return; // exit if leave container is not found
-
-    // create the rabbit image
-    const rabbitDiv = document.createElement('div');
-    rabbitDiv.id = "rabbit-wrapper";
-    
-    const bunnyImg = document.createElement("img");
-    bunnyImg.src = rabbit;
-    bunnyImg.id = "rabbit";
-    
-    rabbitDiv.appendChild(bunnyImg);
-    
-
-    // function to animate the rabbit
-    function hop() {
-        position += step;
-
-        // Horizontal bewegen und "Hüpfen" animieren
-        rabbitDiv.style.left = position + "px";
-        rabbitDiv.style.transform = `translateY(${Math.sin(position / 50) * -hopHeight}px)`;
-
-        // Wenn der Hase den rechten Rand verlässt, zurück auf die linke Seite setzen
-        if (position > screenWidth) {
-            position = -rabbitImg.offsetWidth;
-        }
-
-        requestAnimationFrame(hop);
-    }
-
-    // Start der Animation
-    rabbitDiv.style.left = position + "px";
-    
-    easterContainer.appendChild(rabbitDiv);
-    hop();
-}
-*/
-
 function addHoppingRabbit() {
     if (!bunny) return; // Nur ausführen, wenn Easter aktiviert ist
 
@@ -185,8 +148,56 @@ function addHoppingRabbit() {
     rabbitImg.classList.add("hopping-rabbit");
 
     easterContainer.appendChild(rabbitImg);
+
+    rabbitImg.style.bottom = (hopHeight / 2 + 6) + "px";
+
+    animateRabbit(rabbitImg);
 }
 
+function animateRabbit(rabbit) {
+    let startTime = null;
+
+    function animationStep(timestamp) {
+        if (!rabbitActive) return;
+        if (!startTime) {
+            startTime = timestamp;
+
+            // random start position and direction
+            const startFromLeft = Math.random() >= 0.5;
+            rabbit.startX = startFromLeft ? -10 : 110;
+            rabbit.endX = startFromLeft ? 110 : -10;
+            rabbit.direction = startFromLeft ? 1 : -1;
+
+            // mirror the rabbit image if it starts from the right
+            rabbit.style.transform = startFromLeft ? '' : 'scaleX(-1)';
+        }
+        const progress = timestamp - startTime;
+
+        // calculate the horizontal position (linear interpolation)
+        const x = rabbit.startX + (progress / bunnyDuration) * (rabbit.endX - rabbit.startX);
+
+        // calculate the vertical position (sinus curve)
+        const y = Math.sin((progress / 500) * Math.PI) * hopHeight; // 500ms for one hop
+
+        // set the new position
+        rabbit.style.transform = `translate(${x}vw, ${y}px) scaleX(${rabbit.direction})`;
+
+        if (progress < bunnyDuration) {
+            requestAnimationFrame(animationStep);
+        } else {
+            // let the bunny rest for a while before hiding easter eggs again
+            const pauseDuration = Math.random() * (maxBunnyRestTime - minBunnyRestTime) + minBunnyRestTime;
+            setTimeout(() => {
+                startTime = null;
+                requestAnimationFrame(animationStep);
+            }, pauseDuration);
+        }
+    }
+
+    requestAnimationFrame(animationStep);
+}
+
+
 // initialize standard easter
 function initEaster() {
     const container = document.querySelector('.easter-container') || document.createElement("div");
@@ -234,6 +245,7 @@ document.addEventListener('DOMContentLoaded', () => {
     initEaster();
     toggleEaster();
 
+    const screenWidth = window.innerWidth;
     if (randomEaster && (screenWidth > 768 || randomEasterMobile)) { // add random easter only on larger screens, unless enabled for mobile devices
         addRandomEaster(easterEggCount);
     }