Skip to content

Commit 926ec5c

Browse files
Jee-vimJee-vim
committed
feat(directionally aware)
1 parent 6d3c34f commit 926ec5c

File tree

14 files changed

+216
-26
lines changed

14 files changed

+216
-26
lines changed

‎app/(root)/animation/directionally-aware/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 | Directionally Aware",
5+
description: "Directionally Aware 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/directionally-aware/page.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import DirectionallyAware from "@/components/animation/directionally-aware";
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="Directionally Aware" subtitle="" />
12+
<Wrapper>
13+
<DirectionallyAware />
14+
</Wrapper>
15+
<Pagination
16+
prev={ROUTES.componentUrl("canban")}
17+
next={ROUTES.animationUrl("/scroll-reveal")}
18+
/>
19+
</div>
20+
);
21+
}

‎app/(root)/animation/scroll-reveal/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 Reveal",
5+
description: "Scroll Reveal 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-reveal/page.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import ScrollReveal from "@/components/animation/scroll-reveal";
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 Reveal" subtitle="normal" />
12+
<Wrapper className="!h-[120vh] pt-80 flex justify-center items-center">
13+
<ScrollReveal />
14+
</Wrapper>
15+
<Pagination
16+
prev={ROUTES.componentUrl("canban")}
17+
next={ROUTES.animationUrl("/scroll-reveal")}
18+
/>
19+
</div>
20+
);
21+
}

‎app/(root)/component/canban/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function Page() {
2929
</Wrapper>
3030
<Pagination
3131
prev={ROUTES.componentUrl("gallery")}
32-
next={ROUTES.componentUrl("/")}
32+
next={ROUTES.animationUrl("/scroll-reveal")}
3333
/>
3434
</div>
3535
);

‎app/layout.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import type { Metadata } from "next";
2-
import { DM_Mono } from "next/font/google";
2+
import { DM_Mono, Inter } from "next/font/google";
33
import "./globals.css";
44
import "@/styles/component/sidebar.module.css";
55
import "@/styles/component/nav.module.css";
66

7+
const inter = Inter({
8+
subsets: ["latin"],
9+
variable: "--inter-font",
10+
});
11+
712
const mono = DM_Mono({
813
subsets: ["latin"],
914
weight: ["400", "500"],
@@ -22,7 +27,7 @@ export default function RootLayout({
2227
}>) {
2328
return (
2429
<html lang="en">
25-
<body className={` ${mono.className}`}>{children}</body>
30+
<body className={`${mono.className} ${inter.className}`}>{children}</body>
2631
</html>
2732
);
2833
}

‎auto-push.sh

-23
This file was deleted.

‎components/animation/directionally-aware/index.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styles from "@/styles/modules/directionally-aware.module.css";
2+
3+
export default function Index() {
4+
return (
5+
<div className={styles.container}>
6+
<button type="button" className={`${styles.directionally} ${styles.btn}`}>
7+
<span></span>
8+
Click me
9+
<span></span>
10+
</button>
11+
</div>
12+
);
13+
}

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import style from "@/styles/modules/scrollReveal.module.css";
2+
3+
export default function Index() {
4+
return (
5+
<div className={style.scrollReveal}>
6+
<h3>
7+
<span>Scroll Reveal</span>
8+
</h3>
9+
<p>
10+
<span>
11+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
12+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
13+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
14+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
15+
</span>
16+
</p>
17+
</div>
18+
);
19+
}

‎configs/routes.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export const ROUTES = {
22
formUrl: (slug: string) => `/form/${slug}`,
33
componentUrl: (slug: string) => `/component/${slug}`,
4+
animationUrl: (slug: string) => `/animation/${slug}`,
45
};

‎constants/index.ts

+16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { AiOutlineForm } from "react-icons/ai";
22
import { BiSolidComponent } from "react-icons/bi";
3+
import { MdOutlineAnimation } from "react-icons/md";
34

45
import { ROUTES } from "@/configs/routes";
56

@@ -82,6 +83,21 @@ export const SIDEBAR_ITEMS: ISidebar[] = [
8283
},
8384
],
8485
},
86+
{
87+
icon: MdOutlineAnimation,
88+
title: "Animation",
89+
href: "/animation",
90+
children: [
91+
{
92+
title: "Scroll Reveal",
93+
href: ROUTES.animationUrl("scroll-reveal"),
94+
},
95+
{
96+
title: "Directionally Aware",
97+
href: ROUTES.animationUrl("directionally-aware"),
98+
},
99+
],
100+
},
85101
];
86102

87103
export const OPTOONS = [

‎styles/modules/directionally-aware.module.css

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.container {
2+
@apply flex flex-row gap-5 justify-center items-center;
3+
}
4+
5+
.directionally {
6+
@apply h-14 w-36 rounded-xl relative cursor-pointer overflow-hidden;
7+
8+
transition: background-color 250ms;
9+
background: hsl(185, 53%, 15%);
10+
border: 0.1em solid hsl(185, 53%, 34%);
11+
isolation: isolate;
12+
}
13+
14+
.directionally:hover,
15+
.directionally:focus-visible {
16+
background: hsl(185, 53%, 34%);
17+
}
18+
19+
.directionally>span {
20+
@apply absolute w-[33.333%] h-full z-[-1];
21+
}
22+
23+
.directionally> :first-child {
24+
@apply left-0 top-0;
25+
}
26+
27+
.directionally> :last-child {
28+
@apply right-0 top-0;
29+
}
30+
31+
.directionally::before {
32+
@apply content-[''] absolute w-[10%] rounded-full inset-0 mx-auto z-[-1] opacity-0 bg-primary;
33+
/* background: hsl(200, 60%, 20% / 0.25); */
34+
aspect-ratio: 1;
35+
transition:
36+
transform 1000ms 200ms,
37+
opacity 200ms;
38+
}
39+
40+
/* active when clicked */
41+
.directionally:active::before {
42+
@apply opacity-100;
43+
transform: scale(20);
44+
transition:
45+
transform 1000ms,
46+
opacity 500ms;
47+
}
48+
49+
.directionally:has(:first-child:active)::before {
50+
@apply ml-0;
51+
}
52+
53+
.directionally:has(:last-child:active)::before {
54+
@apply mr-0;
55+
}
56+
57+
.directionally:has(:first-child:active)::before,
58+
.directionally:has(:last-child:active)::before {
59+
transition:
60+
transform 500ms,
61+
opacity 200ms;
62+
}

‎styles/modules/scrollReveal.module.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.scrollReveal span {
2+
@apply inline bg-scroll-reveal bg-no-repeat animate-scroll-reveal bg-clip-text;
3+
color: hsl(0 0% 100% / 0.2);
4+
background-image: linear-gradient(90deg, #fff, #fff);
5+
animation-timeline: view(y);
6+
}
7+
8+
.scrollReveal h3 span {
9+
@apply text-5xl font-semibold font-inter;
10+
animation-range-start: cover 15vh;
11+
animation-range-end: cover 32vh;
12+
}
13+
14+
.scrollReveal p span {
15+
animation-range-start: cover 25vh;
16+
animation-range-end: cover 45vh;
17+
}

‎tailwind.config.ts

+10
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,12 @@ const config = {
1717
"2xl": "1400px",
1818
},
1919
},
20+
backgroundSize: {
21+
"scroll-reveal": "0% 100%",
22+
},
2023
fontFamily: {
2124
mono: ["var(--font-mono)", "monospace"],
25+
inter: ["var(--font-inter)", "sans-serif"],
2226
},
2327
extend: {
2428
colors: {
@@ -172,6 +176,11 @@ const config = {
172176
transform: "translateY(0)",
173177
},
174178
},
179+
"scroll-reveal": {
180+
to: {
181+
backgroundSize: "100% 100%",
182+
}
183+
}
175184
},
176185
animation: {
177186
"accordion-down": "accordion-down 0.2s ease-out",
@@ -183,6 +192,7 @@ const config = {
183192
"zoom-out": "zoomOut 0.3s ease-in-out",
184193
"slide-in-up": "slideInUp 0.4s ease-in-out",
185194
"slide-in-down": "slideInDown 0.4s ease-in-out",
195+
"scroll-reveal": "scroll-reveal linear 0.3s forwards",
186196
},
187197
},
188198
},

0 commit comments

Comments
 (0)