Skip to content

Commit d43cb6b

Browse files
Jee-vimJee-vim
committed
feat(scroll based)
1 parent 926ec5c commit d43cb6b

File tree

10 files changed

+173
-16
lines changed

10 files changed

+173
-16
lines changed

‎app/(root)/animation/directionally-aware/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export default function Page() {
1313
<DirectionallyAware />
1414
</Wrapper>
1515
<Pagination
16-
prev={ROUTES.componentUrl("canban")}
17-
next={ROUTES.animationUrl("/scroll-reveal")}
16+
prev={ROUTES.animationUrl("scroll-based")}
17+
next={ROUTES.animationUrl("")}
1818
/>
1919
</div>
2020
);

‎app/(root)/animation/scroll-based/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Scroll Based",
5+
description: "Scroll Based component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/animation/scroll-based/page.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import ScrollBased from "@/components/animation/scroll-based";
2+
import Pagination from "@/components/ui/Pagination";
3+
import Title from "@/components/ui/Title";
4+
import Wrapper from "@/components/ui/Wrapper";
5+
6+
import { ROUTES } from "@/configs/routes";
7+
8+
export default function Page() {
9+
return (
10+
<div>
11+
<Title title="Scroll Based" subtitle="image animation" />
12+
<Wrapper className="!h-dvh flex justify-center items-center">
13+
<ScrollBased />
14+
</Wrapper>
15+
<Pagination
16+
prev={ROUTES.animationUrl("scroll-reveal")}
17+
next={ROUTES.animationUrl("directionally-aware")}
18+
/>
19+
</div>
20+
);
21+
}

‎components/animation/scroll-based/index.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Image from "next/image";
2+
3+
import { aurora } from "@/lib/image";
4+
import styles from "@/styles/modules/scrollBased.module.css";
5+
6+
export default function Index() {
7+
return (
8+
<div className={`${styles.container} no-scrollbar`}>
9+
<div className={styles.headerContent}>
10+
<Image
11+
src={aurora}
12+
alt="random image"
13+
width={100}
14+
height={100}
15+
className={styles.headerImage}
16+
/>
17+
<div>
18+
<h2>Lorem ipsum dolor sit amet </h2>
19+
<p>
20+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat
21+
reprehenderit
22+
</p>
23+
</div>
24+
</div>
25+
<article>
26+
<p>
27+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
28+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
29+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
30+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
31+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
32+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
33+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
34+
</p>
35+
<p>
36+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
37+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
38+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
39+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
40+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
41+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
42+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
43+
</p>
44+
<p>
45+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
46+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
47+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
48+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
49+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
50+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
51+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
52+
</p>
53+
</article>
54+
</div>
55+
);
56+
}

‎constants/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,10 @@ export const SIDEBAR_ITEMS: ISidebar[] = [
9292
title: "Scroll Reveal",
9393
href: ROUTES.animationUrl("scroll-reveal"),
9494
},
95+
{
96+
title: "Scroll Based",
97+
href: ROUTES.animationUrl("scroll-based"),
98+
},
9599
{
96100
title: "Directionally Aware",
97101
href: ROUTES.animationUrl("directionally-aware"),

‎lib/image.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { default as logo } from "@/public/next.svg";
2+
export { default as aurora } from "@/public/images/photos/aurora.jpg";

‎public/images/photos/aurora.jpg

376 KB
Loading

‎styles/component/layout.module.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.layout {
2-
@apply flex h-screen max-w-7xl mx-auto overflow-hidden
2+
@apply flex h-screen max-w-5xl mx-auto overflow-hidden
33
}
44
.main {
55
@apply flex size-full flex-col
@@ -11,5 +11,5 @@
1111
}
1212

1313
.main>div:last-child {
14-
@apply p-5 sm:p-10 h-dvh w-full xl:w-[calc(90vw-500px)] 2xl:w-full animate-fade-in overflow-y-auto animate-fade-in8
14+
@apply p-5 sm:p-10 h-dvh w-full animate-fade-in overflow-y-auto animate-fade-in8
1515
}

‎styles/modules/scrollBased.module.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* view(): will start when element appair */
2+
/* animation-range: (contain, cover, px, vh, vw) */
3+
4+
.container {
5+
@apply w-full h-full grid gap-10 overflow-y-auto overflow-x-hidden bg-dark-100;
6+
}
7+
8+
.headerContent {
9+
@apply animate-fade-out relative;
10+
animation-timeline: view();
11+
animation-range: exit -300px;
12+
}
13+
14+
.headerContent>div {
15+
@apply absolute inset-0 mx-auto flex flex-col items-center justify-center *:text-center bg-dark-100/50;
16+
}
17+
18+
.headerContent>div>h2 {
19+
@apply text-3xl font-bold text-light;
20+
}
21+
22+
.headerImage {
23+
@apply animate-image-zoom-out w-full;
24+
animation-timeline: view();
25+
animation-range: exit;
26+
}
27+
28+
.container article {
29+
@apply grid gap-5 w-full p-2 pb-96;
30+
}
31+
32+
.container article p {
33+
@apply animate-fade-scroll opacity-0;
34+
scale: 0.9;
35+
animation-timeline: view();
36+
animation-range-start: contain;
37+
animation-range-end: 400px;
38+
}

‎tailwind.config.ts

+35-12
Original file line numberDiff line numberDiff line change
@@ -126,16 +126,6 @@ const config = {
126126
from: { height: "var(--radix-accordion-content-height)" },
127127
to: { height: "0" },
128128
},
129-
"fade-in": {
130-
from: {
131-
opacity: "0",
132-
transform: "translateY(-10px)",
133-
},
134-
to: {
135-
opacity: "1",
136-
transform: "translateY(0px)",
137-
},
138-
},
139129
zoomIn: {
140130
"0%": {
141131
opacity: "0",
@@ -179,17 +169,50 @@ const config = {
179169
"scroll-reveal": {
180170
to: {
181171
backgroundSize: "100% 100%",
182-
}
183-
}
172+
},
173+
},
174+
"fade-in": {
175+
from: {
176+
opacity: "0",
177+
transform: "translateY(-10px)",
178+
},
179+
to: {
180+
opacity: "1",
181+
transform: "translateY(0px)",
182+
},
183+
},
184+
"fade-out": {
185+
to: {
186+
opacity: "0",
187+
},
188+
},
189+
"fade-scroll": {
190+
to: {
191+
opacity: "1",
192+
scale: "1",
193+
},
194+
},
195+
"image-zoom-out": {
196+
"25%": {
197+
opacity: "1",
198+
},
199+
"85%, 100%": {
200+
opacity: "0",
201+
scale: "3",
202+
},
203+
},
184204
},
185205
animation: {
186206
"accordion-down": "accordion-down 0.2s ease-out",
187207
"accordion-up": "accordion-up 0.2s ease-out",
188208
"fade-in": "fade-in 0.2s ease-out",
189209
"fade-in5": "fade-in 0.5s ease-out",
190210
"fade-in8": "fade-in 0.8s ease-out",
211+
"fade-out": "fade-out linear",
212+
"fade-scroll": "fade-scroll linear forwards",
191213
"zoom-in": "zoomIn 0.3s ease-in-out",
192214
"zoom-out": "zoomOut 0.3s ease-in-out",
215+
"image-zoom-out": "image-zoom-out linear forwards",
193216
"slide-in-up": "slideInUp 0.4s ease-in-out",
194217
"slide-in-down": "slideInDown 0.4s ease-in-out",
195218
"scroll-reveal": "scroll-reveal linear 0.3s forwards",

0 commit comments

Comments
 (0)