mirfalah-tech
/
digital-card
Watch 12
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add fade in

am
Amirul Anwar 4 months ago
parent
a975c2323c
commit
724d2174a6
1 changed files with 32 additions and 5 deletions
Unified View Show Diff Stats
  1. 32
    5
      resources/views/digital-card.blade.php

+ 32
- 5
resources/views/digital-card.blade.php View File

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

Write Preview
Loading…
Cancel
Save