revert back fade-in logic

resources/css/app.css

@@ -44,6 +44,12 @@ body.no-scroll {
     overflow: hidden;
 }
 
+.fade-element {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 3s ease-in-out, transform 3s ease-in-out;
+}
+
 .fade-in {
     opacity: 1;
 }

resources/js/app.js

@@ -224,3 +224,23 @@ function eventCountdown() {
         }
     }, 1000); // Update every second (1000 milliseconds)
 }
+
+
+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/components/countdown.blade.php

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-5 w-4/5 py-3">
+<div class="flex flex-col gap-5 w-4/5 py-3 fade-element">
     <hr class="border-t-1 border-gray-300 mt-3 mb-5 w-4/5 self-center">
     <h1 class="font-medium text-gray-600 self-center">Majlis Bermula</h1>
     <div class="flex justify-center" id="countdown"></div>

resources/views/components/event-info.blade.php

@@ -1,19 +1,19 @@
 <div class="flex flex-col gap-5 w-4/5 mt-10">
-    <div class="flex justify-center ">
+    <div class="flex justify-center fade-element">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <p class="font-medium text-sm text-gray-500 pb-3">Dengan penuh rasa kesyukuran, kami</p>
         <p class="font-medium text-gray-600">DATO' HAJI AMIRUDDIN BIN MOHD SAID</p>
         <p class="font-medium text-gray-600">&</p>
         <p class="font-medium text-gray-600">DATIN HAJAH NOR ALINA BINTI ALIAS</p>
     </div>
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <p class="font-medium text-sm text-gray-500">ingin mempersilakan</p>
         <p class="font-medium text-sm text-gray-500">Tan Sri/Dato' Sri/Datin Sri/Dato'/</p>
         <p class="font-medium text-sm text-gray-500">Datin/Tuan/Puan/Encik/Cik</p>
     </div>
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <p class="font-medium text-sm text-gray-500 pb-3">Ke Majlis Resepsi Perkahwinan Putera Kami</p>
         <p class="font-medium text-gray-600">ALIFF BIN DATO' HAJI AMIRUDDIN</p>
         <p class="font-medium text-gray-600">&</p>
@@ -25,11 +25,11 @@
         <p class="font-medium text-sm text-gray-500">Sabtu, 17 Ogos 2024</p>
         <p class="font-medium text-sm text-gray-500">(12 Safar 1446H)</p>
     </div>
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <p class="font-medium text-gray-600 pb-2">Masa</p>
         <p class="font-medium text-sm text-gray-500">11.00 Pagi - 4.00 Petang</p>
     </div>
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <p class="font-medium text-gray-600 pb-2">Tempat</p>
         <p class="font-medium text-sm text-gray-500">Dewan Jubli Perak</p>
         <p class="font-medium text-sm text-gray-500">Sultan Haji Ahmad Shah,</p>
@@ -38,7 +38,7 @@
     </div>
     <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center ">
     @if ($host == 'aliffayuna.com')
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <p class="font-medium text-gray-600 pb-2">Aturcara Majlis</p>
         <p class="font-medium text-sm text-gray-600">11.00 Pagi :</p>
         <p class="font-medium text-sm text-gray-500 pb-4">Majlis Bermula</p>
@@ -67,8 +67,8 @@
             <p class="font-medium text-sm text-gray-500 pb-4">Majlis Tamat</p>
         </div> --}}
     @endif
-    
-    
+
+
     {{-- <div class="flex justify-center space-x-4 py-10">
         <a href="https://wa.me/01133133619" target="_blank" class="flex items-center space-x-2 font-medium text-green-600">
             <i class="fa-brands fa-whatsapp"></i>

resources/views/components/guestbook.blade.php

@@ -10,14 +10,14 @@
             @endfor
         </div>
     </div>
-    <div class="text-center pb-2 ">
+    <div class="text-center pb-2 fade-element">
         <a onclick="guestbook.showModal()" class="rounded-full border-solid border-2 border-navbarcolor py-1 px-3 font-medium text-gray-600">
             <i class="fa-solid fa-pen-fancy"></i>
             <span>Ucapan</span>
         </a>
 
     </div>
-    <div class="text-center pb-2 ">
+    <div class="text-center pb-2 fade-element">
         <a onclick="rsvp.showModal()" class="rounded-full border-solid border-2 border-navbarcolor py-1 px-3 font-medium text-gray-600">
             <i class="fa-solid fa-clipboard"></i>
             <span>Sahkan Kehadiran</span>

resources/views/components/main-event.blade.php

@@ -1,8 +1,8 @@
 <div class="flex flex-col gap-5 w-4/5 mt-44 mb-40 text-navbarcolor">
-    <div class="flex justify-center ">
+    <div class="flex justify-center fade-element">
         <p class="font-semibold text-sm">WALIMATULURUS</p>
     </div>
-    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center ">
+    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center fade-element">
         <div class="flex justify-center">
             <p class="font-tan-pearl font-semibold text-5xl"><span class="text-6xl">A</span>liff</p>
         </div>
@@ -13,7 +13,7 @@
             <p class="font-tan-pearl font-semibold text-5xl"><span class="text-6xl">A</span>yuna</p>
         </div>
     </div>
-    <div class="flex flex-col justify-center">
+    <div class="flex flex-col justify-center fade-element">
         <div class="flex justify-center">
             <p class="font-bold text-base">SABTU</p>
         </div>
@@ -21,7 +21,7 @@
             <p class="font-bold text-base">17 OGOS 2024</p>
         </div>
     </div>
-    <div class="flex flex-col justify-center ">
+    <div class="flex flex-col justify-center fade-element">
         <div class="flex justify-center">
             <p class="font-semibold text-sm">DEWAN JUBLI PERAK</p>
         </div>

resources/views/components/prayer.blade.php

@@ -1,8 +1,8 @@
 <div class="flex flex-col gap-5 w-4/5">
-    <div class="flex justify-center ">
+    <div class="flex justify-center fade-element">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>
-    <div class="text-center ">
+    <div class="text-center fade-element">
         <p class="font-medium text-sm text-gray-500 pb-1">Ya Allah, Ya Tuhan kami. Kami memohon restuMu</p>
         <p class="font-medium text-sm text-gray-500 pb-1">berkatilah majlis kami ini dengan keberkatan dari</p>
         <p class="font-medium text-sm text-gray-500 pb-1">permulaan hingga pengakhirannya. Sesungguhnya</p>