mirfalah-tech
/
digital-card
Watch 12
Star 0
Fork 0

2 Commits
46c9585ae2 ... 0c38a279f4

Author SHA1 Message Date
  Amirul Anwar 0c38a279f4 Merge branch 'master' of https://git.mirfalah.my/mirfalah-tech/digital-card 4 months ago
  Amirul Anwar 724d2174a6 add fade in 4 months ago
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">
88
95
89 
                 // Listen for click or touch event to start auto-scrolling
 96 
                 // Listen for click or touch event to start auto-scrolling
90 
                 window.addEventListener('click', handleInteraction, { once: true });
 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 
         </script>
 119 
         </script>
93 
         <div id="alert-success"></div>
 120 
         <div id="alert-success"></div>
95 
             {{-- <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio> --}}
 122 
             {{-- <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio> --}}
96 
             @include('components.front-cover')
 123 
             @include('components.front-cover')
97 
         </div>
 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 
             @include('components.main-event')
 126 
             @include('components.main-event')
100 
         </div>
 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 
             @include('components.event-info')
 129 
             @include('components.event-info')
103 
         </div>
 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 
             @include('components.countdown')
 132 
             @include('components.countdown')
106 
         </div>
 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 
             @include('components.guestbook')
 135 
             @include('components.guestbook')
109 
         </div>
 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 
             @include('components.prayer')
 138 
             @include('components.prayer')
112 
         </div>
 139 
         </div>
113 
         @include('components.navbar')
 140 
         @include('components.navbar')

Write Preview
Loading…
Cancel
Save