refactor js

resources/js/app.js

@@ -53,6 +53,8 @@ const countdownTimer = setInterval(() => {
 }, 1000); // Update every second (1000 milliseconds)
 
 $(document).ready(function() {
+    var partLeftPos = 0;
+    var partRightPos = 0;
     var audioElement = document.getElementById('player');
     var hasPlayed = false;
     var scrollCount = 0;
@@ -60,19 +62,7 @@ $(document).ready(function() {
     var scrollInterval = 200;
     var scrollAmount = window.innerHeight / 6;
 
-    function playAudio() {
-        if (!hasPlayed) {
-            var playPromise = audioElement.play();
-            if (playPromise !== undefined) {
-                playPromise.then(function() {
-                    hasPlayed = true;
-                }).catch(function(error) {
-                    console.log('Autoplay failed: ' + error);
-                });
-            }
-        }
-    }
-
+    // Function to handle smooth scrolling
     function smoothScroll() {
         if (!hasPlayed) {
             playAudio();
@@ -84,13 +74,15 @@ $(document).ready(function() {
                 var target = start + scrollAmount;
                 var screenWidth = window.innerWidth;
                 var duration;
+
                 if (screenWidth < 600) {
-                    duration = 5000;
+                    duration = 5000; // Smaller screen
                 } else if (screenWidth < 1200) {
-                    duration = 12000;
+                    duration = 12000; // Medium screen
                 } else {
-                    duration = 15000;
+                    duration = 15000; // Larger screen
                 }
+
                 var startTime = null;
 
                 function scrollStep(timestamp) {
@@ -101,7 +93,7 @@ $(document).ready(function() {
                     if (progress < duration) {
                         requestAnimationFrame(scrollStep);
                     } else {
-                        setTimeout(smoothScroll, scrollInterval);
+                        setTimeout(smoothScroll, scrollInterval); // Continues scrolling after a delay
                     }
                 }
 
@@ -110,17 +102,51 @@ $(document).ready(function() {
         }
     }
 
-    function handleInteraction() {
-        document.body.classList.remove('no-scroll');
-        setTimeout(smoothScroll, scrollInterval);
+    // Function to play audio (if not already played)
+    function playAudio() {
+        if (!hasPlayed) {
+            var playPromise = audioElement.play();
+
+            if (playPromise !== undefined) {
+                playPromise.then(function() {
+                    hasPlayed = true;
+                }).catch(function(error) {
+                    console.log('Autoplay failed: ' + error);
+                });
+            }
+        }
     }
 
-    window.addEventListener('click', function() {
+    // jQuery scroll event handling
+    $(window).scroll(function() {
+        var distance = $(this).scrollTop() * 2;
+        var left = partLeftPos - distance;
+        var right = partRightPos - distance;
+
+        $('.left').css('left', left + "px");
+        $('.right').css('right', right + "px");
+
+        var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
+        var isLeftOffScreen = leftPartRightEdge <= 0;
+
+        if (isLeftOffScreen && left < 0) {
+            $('.parent').removeClass('z-30');
+        } else {
+            $('.parent').addClass('z-30');
+        }
+    });
+
+    // Initially check visibility on page load
+    $(window).trigger('scroll');
+
+    // Event listener for click to show overlay after a delay
+    document.addEventListener('click', function() {
         setTimeout(function() {
             document.getElementById('petalOverlay').style.display = 'block';
-        }, 1000);
+        }, 1000); // Delay of 1 second (1000 milliseconds)
     });
 
+    // Event listener for scroll to reset audio and overlay if scrolled to top
     window.addEventListener('scroll', function() {
         if (window.pageYOffset === 0) {
             audioElement.pause();
@@ -129,45 +155,156 @@ $(document).ready(function() {
             document.body.classList.add('no-scroll');
         }
     });
+});
 
-    const observerOptions = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.1
-    };
-
-    const observer = new IntersectionObserver((entries, observer) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('fade-in');
-                observer.unobserve(entry.target);
-            }
-        });
-    }, observerOptions);
 
-    document.querySelectorAll('.fade-element').forEach(element => {
-        observer.observe(element);
-    });
-
-    $(window).scroll(function(event) {
-        var distance = $(this).scrollTop() * 2;
-        var left = 0 - distance;
-        var right = 0 - distance;
+// $(function() {
+//     var partLeftPos = 0;
+//     var partRightPos = 0;
+    
+//     $(window).scroll(function(event) {
+//         var distance = $(this).scrollTop() * 2;
+//         var left = partLeftPos - distance;
+//         var right = partRightPos - distance;
         
-        $('.left').css('left', left + "px");
-        $('.right').css('right', right + "px");
+//         $('.left').css('left', left + "px");
+//         $('.right').css('right', right + "px");
 
-        var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
+//         // Calculate boundaries
+//         var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
 
-        var isLeftOffScreen = leftPartRightEdge <= 0;
+//         // Check if both parts are completely off-screen
+//         var isLeftOffScreen = leftPartRightEdge <= 0;
 
-        if (isLeftOffScreen && left < 0) {
-            $('.parent').removeClass('z-30');
-        } else {
-            $('.parent').addClass('z-30');
-        }
-    });
+//         // Toggle visibility and z-index
+//         if (isLeftOffScreen && left < 0) {
+//             $('.parent').removeClass(['z-30']);
+//         } else {
+//             $('.parent').addClass(['z-30']);
+//         }
+//     });
 
-    $(window).trigger('scroll');
-});
+//     // Initially check visibility on page load
+//     $(window).trigger('scroll');
+
+    
+// });
+
+// document.addEventListener('click', function () {
+//     setTimeout(function () {
+//         document.getElementById('petalOverlay').style.display = 'block';
+//     }, 1000); // Delay of 1 second (1000 milliseconds)
+// });
+
+// document.addEventListener('DOMContentLoaded', function() {
+//     var audioElement = document.getElementById('player');
+//     var hasPlayed = false; // To ensure audio only plays once upon clicking and scrolling
+//     var scrollCount = 0;
+//     var maxScrolls = 8;
+//     var scrollInterval = 200; // Time in milliseconds between each scroll
+//     var scrollAmount = window.innerHeight / 6; // Amount to scroll per interval
+
+//     function playAudio() {
+//         if (!hasPlayed) {
+//             console.log('play')
+//             var playPromise = audioElement.play();
+
+//             if (playPromise !== undefined) {
+//                 playPromise.then(function() {
+//                     // Automatic playback started!
+//                     hasPlayed = true; // Prevent further attempts to play
+//                 }).catch(function(error) {
+//                     // Automatic playback failed.
+//                     console.log('Autoplay failed: ' + error);
+//                 });
+//             }
+//         }
+//     }
+
+//     function smoothScroll() {
+//         if (!hasPlayed) {
+//             playAudio();
+//             scrollCount++;
+//             if (scrollCount >= maxScrolls) {
+//                 playAudio();
+//             } else {
+//                 var start = window.pageYOffset;
+//                 var target = start + scrollAmount;
+//                  // Set duration based on screen size
+//                 var screenWidth = window.innerWidth;
+//                 var duration;
+//                 if (screenWidth < 600) {
+//                     duration = 5000; // Smaller screen
+//                 } else if (screenWidth < 1200) {
+//                     duration = 12000; // Medium screen
+//                 } else {
+//                     duration = 15000; // Larger screen
+//                 }
+//                 var startTime = null;
+
+//                 function scrollStep(timestamp) {
+//                     if (!startTime) startTime = timestamp;
+//                     var progress = timestamp - startTime;
+//                     var currentPosition = start + ((target - start) * (progress / duration));
+//                     window.scrollTo(0, currentPosition);
+//                     if (progress < duration) {
+//                         requestAnimationFrame(scrollStep);
+//                     } else {
+//                         setTimeout(smoothScroll, scrollInterval); // Continues scrolling after a delay
+//                     }
+//                 }
+
+//                 requestAnimationFrame(scrollStep);
+//             }
+//         }
+//     }
+
+//     function playOnly() {
+//         if (!hasPlayed) {
+//             playAudio();
+//             scrollCount++;
+//             if (scrollCount >= maxScrolls) {
+//                 playAudio();
+//             } else {
+//                 setTimeout(playOnly, scrollInterval);
+//             }
+//         }
+//     }
+
+//     function handleInteraction() {
+//         document.body.classList.remove('no-scroll'); // Enable scrolling
+//         setTimeout(smoothScroll, scrollInterval); // Start smooth scrolling after initial delay
+//     }
+
+//     // Listen for click or touch event to start auto-scrolling
+//     window.addEventListener('click', handleInteraction);
+
+//     window.addEventListener('scroll', function() {
+//         if (window.pageYOffset === 0) {
+//             audioElement.pause();
+//             document.getElementById('petalOverlay').style.display = 'none';
+//             hasPlayed = false; // Reset to allow replay
+//             document.body.classList.add('no-scroll');
+//         }
+//     });
+
+//      // Intersection Observer for fading in elements
+//     const observerOptions = {
+//         root: null,
+//         rootMargin: '0px',
+//         threshold: 0.1
+//     };
+
+//     const observer = new IntersectionObserver((entries, observer) => {
+//         entries.forEach(entry => {
+//             if (entry.isIntersecting) {
+//                 entry.target.classList.add('fade-in');
+//                 observer.unobserve(entry.target);
+//             }
+//         });
+//     }, observerOptions);
 
+//     document.querySelectorAll('.fade-element').forEach(element => {
+//         observer.observe(element);
+//     });
+// });