feat: make nav bg darker when scrolling

koodiklinikka · May 31, 2024 · 8d72508 · 8d72508
1 parent e51f986
commit 8d72508
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 1 deletion.
diff --git a/app/globals.css b/app/globals.css
@@ -53,6 +53,27 @@ html {
   }
 }
 
+.top-fade {
+  height: 10rem;
+  background: #070b1e url('../public/background.webp');
+  background-size: 1024px auto;
+  background-position: top center;
+  background-repeat: no-repeat;
+  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0));
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 50;
+}
+
+@media (min-width: 1024px) {
+  .top-fade {
+    background-size: 100% auto;
+  }
+}
+
 h1,
 h2,
 h3 {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import BottomFade from '@/components/BottomFade';
+import TopFade from '@/components/TopFade';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -22,6 +23,7 @@ export default function RootLayout({
   return (
     <html lang="fi">
       <body className={`${inter.className} pb-24 text-white`}>
+        <TopFade />
         {children}
         <BottomFade />
       </body>

diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -23,7 +23,7 @@ export default function Nav() {
   }, []);
 
   return (
-    <nav className="fixed left-0 top-0 z-50 h-32 w-full bg-gradient-to-b from-black/40 to-fuchsia-950/0">
+    <nav className="fixed left-0 top-0 z-50 h-32 w-full">
       <Wrapper>
         <div className="relative flex items-center justify-between px-6 py-5 md:px-12">
           <div className="shrink-0">

diff --git a/components/TopFade.tsx b/components/TopFade.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function TopFade() {
+  const [brightness, setBrightness] = useState(1);
+
+  const handleScroll = (event: Event) => {
+    if (window.scrollY > 200) {
+      if (brightness === 0.5) return;
+      setBrightness(0.5);
+      return;
+    }
+
+    const amountToDecrease = (window.scrollY / 200) * 0.5;
+    setBrightness(1 - amountToDecrease);
+  };
+
+  useEffect(() => {
+    document.addEventListener('scroll', handleScroll, true);
+    return () => {
+      document.removeEventListener('scroll', handleScroll, true);
+    };
+  }, []);
+
+  return (
+    <div
+      className="top-fade pointer-events-none"
+      style={{
+        filter: `brightness(${brightness})`,
+      }}
+    ></div>
+  );
+}