testing for interception front cover

resources/js/app.js

@@ -56,156 +56,142 @@ $(function() {
     var partLeftPos = 0;
     var partRightPos = 0;
     var scrollTimeout;
-
+    
     function debounceScroll() {
-        clearTimeout(scrollTimeout);
-        scrollTimeout = setTimeout(function() {
-            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']);
-            }
-        }, 100); // Adjust debounce delay as needed (in milliseconds)
+        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');
+        }
     }
 
     $(window).scroll(function(event) {
-        debounceScroll();
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(debounceScroll, 100); // Debounce scroll event
     });
 
     // Initially check visibility on page load
-    $(window).trigger('scroll');
-});
+    debounceScroll();
 
+    document.addEventListener('click', function () {
+        setTimeout(function () {
+            document.getElementById('petalOverlay').style.display = 'block';
+        }, 1000); // Delay of 1 second (1000 milliseconds)
+    });
 
-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);
-                });
+    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) {
+        function smoothScroll() {
+            if (!hasPlayed) {
                 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
+                scrollCount++;
+                if (scrollCount >= maxScrolls) {
+                    playAudio();
                 } 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);
+                    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 {
-                        setTimeout(smoothScroll, scrollInterval); // Continues scrolling after a delay
+                        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);
+                    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
         }
-    }
-
-    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');
-        }
-    });
+        // Listen for click or touch event to start auto-scrolling
+        window.addEventListener('click', handleInteraction);
 
-     // 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);
+        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');
             }
         });
-    }, observerOptions);
 
-    document.querySelectorAll('.fade-element').forEach(element => {
-        observer.observe(element);
+        // 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);
+        });
     });
 });
+