remove refactor

resources/js/app.js

@@ -52,17 +52,66 @@ const countdownTimer = setInterval(() => {
     }
 }, 1000); // Update every second (1000 milliseconds)
 
-$(document).ready(function() {
+$(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");
+
+        // 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']);
+        }
+    });
+    // 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;
+    var hasPlayed = false; // To ensure audio only plays once upon clicking and scrolling
     var scrollCount = 0;
     var maxScrolls = 8;
-    var scrollInterval = 200;
-    var scrollAmount = window.innerHeight / 6;
+    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 to handle smooth scrolling
     function smoothScroll() {
         if (!hasPlayed) {
             playAudio();
@@ -72,9 +121,9 @@ $(document).ready(function() {
             } 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) {
@@ -82,7 +131,6 @@ $(document).ready(function() {
                 } else {
                     duration = 15000; // Larger screen
                 }
-
                 var startTime = null;
 
                 function scrollStep(timestamp) {
@@ -102,209 +150,52 @@ $(document).ready(function() {
         }
     }
 
-    // Function to play audio (if not already played)
-    function playAudio() {
+    function playOnly() {
         if (!hasPlayed) {
-            var playPromise = audioElement.play();
-
-            if (playPromise !== undefined) {
-                playPromise.then(function() {
-                    hasPlayed = true;
-                }).catch(function(error) {
-                    console.log('Autoplay failed: ' + error);
-                });
+            playAudio();
+            scrollCount++;
+            if (scrollCount >= maxScrolls) {
+                playAudio();
+            } else {
+                setTimeout(playOnly, scrollInterval);
             }
         }
     }
 
-    // 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');
+    function handleInteraction() {
+        document.body.classList.remove('no-scroll'); // Enable scrolling
+        setTimeout(smoothScroll, scrollInterval); // Start smooth scrolling after initial delay
+    }
 
-    // Event listener for click to show overlay after a delay
-    document.addEventListener('click', function() {
-        setTimeout(function() {
-            document.getElementById('petalOverlay').style.display = 'block';
-        }, 1000); // Delay of 1 second (1000 milliseconds)
-    });
+    // Listen for click or touch event to start auto-scrolling
+    window.addEventListener('click', handleInteraction);
 
-    // Event listener for scroll to reset audio and overlay if scrolled to top
     window.addEventListener('scroll', function() {
         if (window.pageYOffset === 0) {
             audioElement.pause();
             document.getElementById('petalOverlay').style.display = 'none';
-            hasPlayed = false;
+            hasPlayed = false; // Reset to allow replay
             document.body.classList.add('no-scroll');
         }
     });
-});
-
 
-// $(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");
-
-//         // 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']);
-//         }
-//     });
-
-//     // 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);
+     // 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);
-//     });
-// });
+    document.querySelectorAll('.fade-element').forEach(element => {
+        observer.observe(element);
+    });
+});