koodiklinikka/koodiklinikka.fi
1
0
Fork 0
mirror of https://github.com/koodiklinikka/koodiklinikka.fi.git synced 2026-01-26 03:14:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make nav bg darker when scrolling

Browse Source
This commit is contained in:
Petri Partio
2024-05-31 13:27:00 +03:00
parent e51f9863d7
commit 8d72508b66
4 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/globals.css
View File

@@ -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 {

2
app/layout.tsx
View File

@@ -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>

2
components/Nav.tsx
View File

@@ -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">

34
components/TopFade.tsx Normal file
View File

@@ -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>
);
}