test

resources/js/app.js

@@ -52,146 +52,122 @@ const countdownTimer = setInterval(() => {
     }
 }, 1000); // Update every second (1000 milliseconds)
 
-$(function() {
-    var partLeftPos = 0;
-    var partRightPos = 0;
-    var scrollTimeout;
-    
-    function debounceScroll() {
-        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) {
-        clearTimeout(scrollTimeout);
-        scrollTimeout = setTimeout(debounceScroll, 100); // Debounce scroll event
-    });
-
-    // Initially check visibility on page load
-    debounceScroll();
-
-    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).ready(function() {
+    var audioElement = document.getElementById('player');
+    var hasPlayed = false;
+    var scrollCount = 0;
+    var maxScrolls = 8;
+    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 smoothScroll() {
-            if (!hasPlayed) {
+    function smoothScroll() {
+        if (!hasPlayed) {
+            playAudio();
+            scrollCount++;
+            if (scrollCount >= maxScrolls) {
                 playAudio();
-                scrollCount++;
-                if (scrollCount >= maxScrolls) {
-                    playAudio();
+            } else {
+                var start = window.pageYOffset;
+                var target = start + scrollAmount;
+                var screenWidth = window.innerWidth;
+                var duration;
+                if (screenWidth < 600) {
+                    duration = 5000;
+                } else if (screenWidth < 1200) {
+                    duration = 12000;
                 } 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
+                    duration = 15000;
+                }
+                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 {
-                        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
-                        }
+                        setTimeout(smoothScroll, scrollInterval);
                     }
-
-                    requestAnimationFrame(scrollStep);
                 }
+
+                requestAnimationFrame(scrollStep);
             }
         }
+    }
 
-        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');
+        setTimeout(smoothScroll, scrollInterval);
+    }
+
+    window.addEventListener('click', function() {
+        setTimeout(function() {
+            document.getElementById('petalOverlay').style.display = 'block';
+        }, 1000);
+    });
 
-        // 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;
+            document.body.classList.add('no-scroll');
+        }
+    });
 
-        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');
+    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);
-        });
+    $(window).scroll(function(event) {
+        var distance = $(this).scrollTop() * 2;
+        var left = 0 - distance;
+        var right = 0 - 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');
+        }
     });
+
+    $(window).trigger('scroll');
 });