update: add small transition on banner image

troll-org · Dec 9, 2024 · 6ae6ad7 · 6ae6ad7 · github-actions · Dec 9, 2024
1 parent 0f3665a
commit 6ae6ad7
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/components/home-banner.tsx b/components/home-banner.tsx
@@ -17,8 +17,12 @@ const HomeBanner: React.FC = () => {
         <Image
           src="/dawn.webp"
           alt="Background"
-          fill
-          className="w-screen opacity-20"
+          layout="fill"
+          className="w-screen opacity-0 transition-opacity duration-1000 ease-in-out"
+          onLoadingComplete={(img) => {
+            img.classList.remove("opacity-0");
+            img.classList.add("opacity-20");
+          }}
         />
       </div>
       <div className="flex h-[84vh] items-center justify-center px-8 sm:px-4">