front cover opening

resources/css/app.css

@@ -31,4 +31,34 @@
 /* Remove outline on focus for all elements */
 *:focus {
     outline: none;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+body.no-scroll {
+    overflow: hidden;
+}
+.fade-element {
+    opacity: 0;
+    transition: opacity 3s ease-in-out;
+}
+.fade-in {
+    opacity: 1;
+}
+.petal-overlay {
+    position: fixed; /* Fixes the position to the viewport */
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none; /* Allows interactions through the overlay */
+    z-index: 9999; /* Ensures it is on top of other elements */
+    opacity: 0.3; /* Set the opacity to a lower value */
+    display: none; /* Initially hidden */
+}
+.petal-overlay img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Ensures the image covers the entire container */
 }

resources/js/app.js

@@ -81,20 +81,106 @@ $(function() {
     // Initially check visibility on page load
     $(window).trigger('scroll');
 
-    document.addEventListener('DOMContentLoaded', function() {
-        const observer = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('animate-fadeUp');
-                    entry.target.classList.remove('opacity-0');
+    
+});
+
+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 = 500; // 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;
+                var duration = 1500; // duration of the animation
+                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
+                    }
                 }
-            });
-        }, {
-            threshold: 0.1
-        });
 
-        document.querySelectorAll('.fade-up').forEach(element => {
-            observer.observe(element);
+                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, { once: true });
+
+     // 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);
     });
 });

resources/views/digital-card.blade.php

@@ -13,37 +13,6 @@
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
         @vite(['resources/css/app.css','resources/js/app.js'])
-        <style>
-            html {
-                scroll-behavior: smooth;
-            }
-            body.no-scroll {
-                overflow: hidden;
-            }
-            .fade-element {
-                opacity: 0;
-                transition: opacity 3s ease-in-out;
-            }
-            .fade-in {
-                opacity: 1;
-            }
-            .petal-overlay {
-                position: fixed; /* Fixes the position to the viewport */
-                top: 0;
-                left: 0;
-                width: 100vw;
-                height: 100vh;
-                pointer-events: none; /* Allows interactions through the overlay */
-                z-index: 9999; /* Ensures it is on top of other elements */
-                opacity: 0.3; /* Set the opacity to a lower value */
-                display: none; /* Initially hidden */
-            }
-            .petal-overlay img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover; /* Ensures the image covers the entire container */
-            }
-        </style>
     </head>
     <body class="antialiased font-serif no-scroll">
         <div role="alert" class="alert alert-info hidden z-40 fixed w-1/2 top-3 right-3">
@@ -55,95 +24,7 @@
     
         <audio id="player" loop>
             <source src="{{ asset('assets/background-musicv2.mp3') }}" type="audio/mp3">
-            Your browser does not support the audio element.
         </audio>
-        <script>
-            document.addEventListener('click', function () {
-                setTimeout(function () {
-                    document.getElementById('petalOverlay').style.display = 'block';
-                }, 1000); // Delay of 1 second (1000 milliseconds)
-            });
-        </script>
-        <script>
-            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 = 6;
-                var scrollInterval = 500; // 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 {
-                            window.scrollBy(0, scrollAmount); // Smooth scroll a fraction of the window height
-                            setTimeout(playOnly, scrollInterval);
-                        }
-                    }
-                }
-
-                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, { once: true });
-
-                 // 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);
-                });
-            });
-        </script>
         <div class="parent absolute h-screen w-full">
             {{-- <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio> --}}
             @include('components.front-cover')