mirfalah-tech
/
digital-card
Volgen 12
Ster 0
Vork 0

2 Commits
46c9585ae2 ... 0c38a279f4

Auteur SHA1 Bericht Datum
  Amirul Anwar 0c38a279f4 Merge branch 'master' of https://git.mirfalah.my/mirfalah-tech/digital-card 4 maanden geleden
  Amirul Anwar 724d2174a6 add fade in 4 maanden geleden
1 gewijzigde bestanden met toevoegingen van 32 en 5 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 32
    5
      resources/views/digital-card.blade.php

+ 32
- 5
resources/views/digital-card.blade.php Bestand weergeven 

@@ -20,6 +20,13 @@
20 20 
             body.no-scroll {
21 21 
                 overflow: hidden;
22 22 
             }
23 
+            .fade-element {
24 
+                opacity: 0;
25 
+                transition: opacity 3s ease-in-out;
26 
+            }
27 
+            .fade-in {
28 
+                opacity: 1;
29 
+            }
23 30 
         </style>
24 31 
     </head>
25 32 
     <body class="antialiased font-serif no-scroll">
 
@@ -88,6 +95,26 @@
88 95
89 96 
                 // Listen for click or touch event to start auto-scrolling
90 97 
                 window.addEventListener('click', handleInteraction, { once: true });
98 
+
99 
+                 // Intersection Observer for fading in elements
100 
+                const observerOptions = {
101 
+                    root: null,
102 
+                    rootMargin: '0px',
103 
+                    threshold: 0.1
104 
+                };
105 
+
106 
+                const observer = new IntersectionObserver((entries, observer) => {
107 
+                    entries.forEach(entry => {
108 
+                        if (entry.isIntersecting) {
109 
+                            entry.target.classList.add('fade-in');
110 
+                            observer.unobserve(entry.target);
111 
+                        }
112 
+                    });
113 
+                }, observerOptions);
114 
+
115 
+                document.querySelectorAll('.fade-element').forEach(element => {
116 
+                    observer.observe(element);
117 
+                });
91 118 
             });
92 119 
         </script>
93 120 
         <div id="alert-success"></div>
 
@@ -95,19 +122,19 @@
95 122 
             {{-- <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio> --}}
96 123 
             @include('components.front-cover')
97 124 
         </div>
98 
-        <div class="section bg-babyblue min-h-screen flex justify-center items-center">
125 
+        <div class="section bg-babyblue min-h-screen flex justify-center items-center pb-20 fade-element">
99 126 
             @include('components.main-event')
100 127 
         </div>
101 
-        <div class="section bg-babyblue min-h-screen flex justify-center">
128 
+        <div class="section bg-babyblue min-h-screen flex justify-center pb-20 fade-element">
102 129 
             @include('components.event-info')
103 130 
         </div>
104 
-        <div class="section bg-babyblue flex justify-center">
131 
+        <div class="section bg-babyblue flex justify-center pb-20 fade-element">
105 132 
             @include('components.countdown')
106 133 
         </div>
107 
-        <div class="section bg-babyblue flex justify-center pb-5">
134 
+        <div class="section bg-babyblue flex justify-center pb-5 pb-20 fade-element">
108 135 
             @include('components.guestbook')
109 136 
         </div>
110 
-        <div class="section bg-babyblue flex justify-center pt-5 pb-20">
137 
+        <div class="section bg-babyblue flex justify-center pt-5 pb-20 fade-element">
111 138 
             @include('components.prayer')
112 139 
         </div>
113 140 
         @include('components.navbar')

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan