revert back cover openclose logic

resources/css/app.css

@@ -107,39 +107,7 @@ body.no-scroll {
     transition: all 0.1s ease-in-out;
 }
 
-@keyframes to-left{
-    from{
-        transform: translateX(0%);
-    }
-    to{
-        transform: translateX(-100%);
-    }
-}
 
-@keyframes to-right{
-    from{
-        transform: translateX(0%);
-    }
-    to{
-        transform: translateX(100%);
-    }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-        .part.left {
-            animation: to-left linear both;
-            animation-timeline: scroll();
-            animation-range-end: 4%;
-        }
-
-        .part.right {
-            animation: to-right linear both;
-            animation-timeline: scroll();
-            animation-range-end: 4%;
-        }
-    }
-}
 
 
 @keyframes pulsIn {

resources/js/app.js

@@ -7,6 +7,7 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
 document.addEventListener('DOMContentLoaded', function () {
 
     imageLoading()
+    scrollOpenCover();
     reset() // reset everrything to ensure smooth
     sessionStorage.setItem("initial-load", "true"); // will be used by click event
 
@@ -37,12 +38,12 @@ document.addEventListener('click', function () {
         }, 600)
     }
 
-    setTimeout(()=>{
+    setTimeout(() => {
         eventCountdown();
         let petalOverlay = document.getElementById("petalOverlay");
         petalOverlay.classList.remove("hidden");
 
-    },5000)
+    }, 5000)
 
 });
 
@@ -103,6 +104,49 @@ function imageLoading() {
     checkAllImagesLoaded();
 }
 
+// enable open close cover
+function scrollOpenCover() {
+    var partLeftPos = 0;
+    var partRightPos = 0;
+
+    function updatePositions() {
+        var distance = $(window).scrollTop() * 2;
+        var left = partLeftPos - distance;
+        var right = partRightPos - distance;
+
+        $('.left').css('left', left + "px");
+        $('.right').css('right', right + "px");
+
+        //Calculate boundaries
+        var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
+
+        //Check if both parts are completely off-screen
+        var isLeftOffScreen = leftPartRightEdge <= 0;
+
+        //Toggle visibility and z-index
+        if (isLeftOffScreen && left < 0) {
+            $('.parent').removeClass('z-30');
+        } else {
+            $('.parent').addClass('z-30');
+        }
+    }
+
+    //Initial positions update
+    updatePositions();
+
+    //Listen to scroll events using requestAnimationFrame for smooth animation
+    var ticking = false;
+    $(window).scroll(function () {
+        if (!ticking) {
+            window.requestAnimationFrame(function () {
+                updatePositions();
+                ticking = false;
+            });
+        }
+        ticking = true;
+    });
+}
+
 function reset() {
 
     // reset to top
@@ -115,7 +159,7 @@ function reset() {
     }, 100)
 }
 
-function playMusic(){
+function playMusic() {
     var audioElement = document.getElementById('player');
     var hasPlayed = false;
     if (!hasPlayed) {
@@ -123,10 +167,10 @@ function playMusic(){
         var playPromise = audioElement.play();
 
         if (playPromise !== undefined) {
-            playPromise.then(function() {
+            playPromise.then(function () {
                 // Automatic playback started!
                 hasPlayed = true; // Prevent further attempts to play
-            }).catch(function(error) {
+            }).catch(function (error) {
                 // Automatic playback failed.
                 console.log('Autoplay failed: ' + error);
             });
@@ -134,28 +178,28 @@ function playMusic(){
     }
 }
 
-function eventCountdown(){
+function eventCountdown() {
 
-//Countdown date (adjust this date to your desired countdown target)
-const countdownDate = new Date('2024-08-17T11:00:00').getTime();
+    //Countdown date (adjust this date to your desired countdown target)
+    const countdownDate = new Date('2024-08-17T11:00:00').getTime();
 
-//Update the countdown every second
-const countdownElement = document.getElementById('countdown');
-const countdownTimer = setInterval(() => {
-    //Get the current date and time
-    const now = new Date().getTime();
+    //Update the countdown every second
+    const countdownElement = document.getElementById('countdown');
+    const countdownTimer = setInterval(() => {
+        //Get the current date and time
+        const now = new Date().getTime();
 
-    //Calculate the time remaining
-    const distance = countdownDate - now;
+        //Calculate the time remaining
+        const distance = countdownDate - now;
 
-    //Calculate days, hours, minutes, and seconds
-    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
-    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+        //Calculate days, hours, minutes, and seconds
+        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
-    //Format the countdown into a string
-    const countdownHTML = `
+        //Format the countdown into a string
+        const countdownHTML = `
         <div class="flex flex-col">
             <div class="flex gap-8 justify-center">
                 <div class="font-medium text-gray-500">${days}</div>
@@ -175,13 +219,13 @@ const countdownTimer = setInterval(() => {
         </div>
     `;
 
-    //Display the countdown in the element
-    countdownElement.innerHTML = countdownHTML;
+        //Display the countdown in the element
+        countdownElement.innerHTML = countdownHTML;
 
-    //If the countdown is over, clear the timer and display a message
-    if (distance < 0) {
-        clearInterval(countdownTimer);
-        countdownElement.innerHTML = 'Majlis berlangsung';
-    }
-}, 1000); // Update every second (1000 milliseconds)
+        //If the countdown is over, clear the timer and display a message
+        if (distance < 0) {
+            clearInterval(countdownTimer);
+            countdownElement.innerHTML = 'Majlis berlangsung';
+        }
+    }, 1000); // Update every second (1000 milliseconds)
 }