From 86a9aae23dafc107b06d335371dabb05cb750343 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Fri, 24 Nov 2023 16:28:22 +0900 Subject: [PATCH 1/6] =?UTF-8?q?style=20:=20max-width=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/components/Introduce/style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/views/MainPage/components/Introduce/style.ts b/src/views/MainPage/components/Introduce/style.ts index 5b6479f9..21ee78cf 100644 --- a/src/views/MainPage/components/Introduce/style.ts +++ b/src/views/MainPage/components/Introduce/style.ts @@ -4,7 +4,6 @@ import { motion } from 'framer-motion'; export const Background = styled.section` display: flex; - max-width: 1920px; height: 200vh; justify-content: center; align-items: flex-start; From 00d40809df554dda2246c93a930e80436d9b79cf Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Fri, 24 Nov 2023 16:30:23 +0900 Subject: [PATCH 2/6] =?UTF-8?q?chore=20:=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Introduce/MotionTitle/index.tsx | 37 ------------------- .../components/Introduce/MotionTitle/style.ts | 16 -------- .../MainPage/components/Introduce/index.tsx | 23 ++++++++++-- .../MainPage/components/Introduce/style.ts | 14 +++++++ 4 files changed, 34 insertions(+), 56 deletions(-) delete mode 100644 src/views/MainPage/components/Introduce/MotionTitle/index.tsx delete mode 100644 src/views/MainPage/components/Introduce/MotionTitle/style.ts diff --git a/src/views/MainPage/components/Introduce/MotionTitle/index.tsx b/src/views/MainPage/components/Introduce/MotionTitle/index.tsx deleted file mode 100644 index 2fe43f69..00000000 --- a/src/views/MainPage/components/Introduce/MotionTitle/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { useScroll, useTransform } from 'framer-motion'; -import { RefObject, useEffect, useState } from 'react'; -import { useIsMobile } from '@src/hooks/useDevice'; -import * as S from './style'; - -interface MotionTitleProps { - contentRef: RefObject; - content: string; -} - -export default function MotionTitle({ contentRef, content }: MotionTitleProps) { - const isMobileSize = useIsMobile('768px'); - - const { scrollYProgress } = useScroll({ - target: contentRef, - offset: ['end center', 'start start'], - }); - - const [style, setStyle] = useState<{ opacity?: number; clipPath?: string }>(); - const scrollValue = useTransform(scrollYProgress, [1, 0.4], ['100%', '0%']); - - useEffect(() => { - const unsubscribe = scrollValue.on('change', (value) => { - const percentValue = Number(value.split('%')[0]); - const newStyle = isMobileSize - ? { opacity: (100 - percentValue) / 100 } - : { clipPath: `inset(0% ${percentValue}% 0% 0%)` }; - setStyle(newStyle); - }); - - return () => { - unsubscribe(); - }; - }, [scrollValue, isMobileSize]); - - return ; -} diff --git a/src/views/MainPage/components/Introduce/MotionTitle/style.ts b/src/views/MainPage/components/Introduce/MotionTitle/style.ts deleted file mode 100644 index 7fc0898b..00000000 --- a/src/views/MainPage/components/Introduce/MotionTitle/style.ts +++ /dev/null @@ -1,16 +0,0 @@ -import styled from '@emotion/styled'; -import { motion } from 'framer-motion'; - -export const MotionTitle = styled(motion.span)` - position: absolute; - left: 0; - - :before { - content: attr(data-text); - display: inline-block; - background: linear-gradient(93deg, #c9d8dd 78.65%, #fff 128.82%, #c9d8dd 137.19%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } -`; diff --git a/src/views/MainPage/components/Introduce/index.tsx b/src/views/MainPage/components/Introduce/index.tsx index bcc90fce..592a426e 100644 --- a/src/views/MainPage/components/Introduce/index.tsx +++ b/src/views/MainPage/components/Introduce/index.tsx @@ -1,9 +1,10 @@ import { useScroll, useTransform } from 'framer-motion'; -import { useRef } from 'react'; -import MotionTitle from './MotionTitle'; +import { useEffect, useRef, useState } from 'react'; +import { useIsMobile } from '@src/hooks/useDevice'; import * as S from './style'; export default function Introduce() { + const isMobileSize = useIsMobile('768px'); const contentRef = useRef(null); const { scrollYProgress } = useScroll({ target: contentRef, @@ -13,11 +14,27 @@ export default function Introduce() { const scaleValue = useTransform(scrollYProgress, [1, 0.4], [0.9, 1]); const content = '전국 최대 규모의 대학생 IT 연합 동아리, SOPT를 소개합니다.'; + const [style, setStyle] = useState<{ opacity?: number; clipPath?: string }>(); + const scrollValue = useTransform(scrollYProgress, [1, 0.4], ['100%', '0%']); + + useEffect(() => { + const unsubscribe = scrollValue.on('change', (value) => { + const percentValue = Number(value.split('%')[0]); + const newStyle = isMobileSize + ? { opacity: (100 - percentValue) / 100 } + : { clipPath: `inset(0% ${percentValue}% 0% 0%)` }; + setStyle(newStyle); + }); + + return () => { + unsubscribe(); + }; + }, [scrollValue, isMobileSize]); return ( - + {content} diff --git a/src/views/MainPage/components/Introduce/style.ts b/src/views/MainPage/components/Introduce/style.ts index 21ee78cf..cdfbd7ad 100644 --- a/src/views/MainPage/components/Introduce/style.ts +++ b/src/views/MainPage/components/Introduce/style.ts @@ -62,6 +62,20 @@ export const TextContainer = styled(motion.span)` } `; +export const MotionTitle = styled(motion.span)` + position: absolute; + left: 0; + + :before { + content: attr(data-text); + display: inline-block; + background: linear-gradient(93deg, #c9d8dd 78.65%, #fff 128.82%, #c9d8dd 137.19%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +`; + export const BackgroundTitle = styled.span` background: linear-gradient(93deg, #c9d8dd -34.77%, #fff -14.77%, #636770 6.12%); background-clip: text; From e33a678e19dd3c690ebe113be4b71d6e0e578281 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Fri, 24 Nov 2023 16:31:22 +0900 Subject: [PATCH 3/6] style : default opacity --- src/views/MainPage/components/Introduce/index.tsx | 2 +- src/views/MainPage/components/Introduce/style.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/MainPage/components/Introduce/index.tsx b/src/views/MainPage/components/Introduce/index.tsx index 592a426e..80469546 100644 --- a/src/views/MainPage/components/Introduce/index.tsx +++ b/src/views/MainPage/components/Introduce/index.tsx @@ -22,7 +22,7 @@ export default function Introduce() { const percentValue = Number(value.split('%')[0]); const newStyle = isMobileSize ? { opacity: (100 - percentValue) / 100 } - : { clipPath: `inset(0% ${percentValue}% 0% 0%)` }; + : { clipPath: `inset(0% ${percentValue}% 0% 0%)`, opacity: 1 }; setStyle(newStyle); }); diff --git a/src/views/MainPage/components/Introduce/style.ts b/src/views/MainPage/components/Introduce/style.ts index cdfbd7ad..54b64a6f 100644 --- a/src/views/MainPage/components/Introduce/style.ts +++ b/src/views/MainPage/components/Introduce/style.ts @@ -65,6 +65,7 @@ export const TextContainer = styled(motion.span)` export const MotionTitle = styled(motion.span)` position: absolute; left: 0; + opacity: 0; :before { content: attr(data-text); From 62c8892283cfceb3996d08870a463a9be5e746d9 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Fri, 24 Nov 2023 16:46:14 +0900 Subject: [PATCH 4/6] =?UTF-8?q?chore=20:=20=EB=B0=98=EB=B3=B5=EB=90=98?= =?UTF-8?q?=EB=8A=94=20useScroll=20offset=20=ED=95=A9=EC=B9=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/components/Introduce/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/MainPage/components/Introduce/index.tsx b/src/views/MainPage/components/Introduce/index.tsx index 80469546..eee75041 100644 --- a/src/views/MainPage/components/Introduce/index.tsx +++ b/src/views/MainPage/components/Introduce/index.tsx @@ -8,7 +8,7 @@ export default function Introduce() { const contentRef = useRef(null); const { scrollYProgress } = useScroll({ target: contentRef, - offset: ['end center', 'start start'], + offset: ['end center', 'start'], }); const scaleValue = useTransform(scrollYProgress, [1, 0.4], [0.9, 1]); From 42b66f09fe53755affe1b781846578f5f6dbe16b Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Sat, 25 Nov 2023 10:13:03 +0900 Subject: [PATCH 5/6] feat : scrollValue string to number --- src/views/MainPage/components/Introduce/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/views/MainPage/components/Introduce/index.tsx b/src/views/MainPage/components/Introduce/index.tsx index eee75041..781b84e7 100644 --- a/src/views/MainPage/components/Introduce/index.tsx +++ b/src/views/MainPage/components/Introduce/index.tsx @@ -15,14 +15,13 @@ export default function Introduce() { const content = '전국 최대 규모의 대학생 IT 연합 동아리, SOPT를 소개합니다.'; const [style, setStyle] = useState<{ opacity?: number; clipPath?: string }>(); - const scrollValue = useTransform(scrollYProgress, [1, 0.4], ['100%', '0%']); + const scrollValue = useTransform(scrollYProgress, [1, 0.4], [100, 0]); useEffect(() => { const unsubscribe = scrollValue.on('change', (value) => { - const percentValue = Number(value.split('%')[0]); const newStyle = isMobileSize - ? { opacity: (100 - percentValue) / 100 } - : { clipPath: `inset(0% ${percentValue}% 0% 0%)`, opacity: 1 }; + ? { opacity: 1 - value / 100 } + : { clipPath: `inset(0% ${value}% 0% 0%)`, opacity: 1 }; setStyle(newStyle); }); From 6b4df2286b0b363ae5e02d7073ac8e43511eca60 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Mon, 27 Nov 2023 14:34:15 +0900 Subject: [PATCH 6/6] style : use double colon --- src/views/MainPage/components/Introduce/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/MainPage/components/Introduce/style.ts b/src/views/MainPage/components/Introduce/style.ts index 54b64a6f..3334f9ee 100644 --- a/src/views/MainPage/components/Introduce/style.ts +++ b/src/views/MainPage/components/Introduce/style.ts @@ -67,7 +67,7 @@ export const MotionTitle = styled(motion.span)` left: 0; opacity: 0; - :before { + ::before { content: attr(data-text); display: inline-block; background: linear-gradient(93deg, #c9d8dd 78.65%, #fff 128.82%, #c9d8dd 137.19%);