애니메이션2 [React] 스크롤하면 나타나는 위로가기 버튼 만들기(Floating Action Button & Style-Components) 프로젝트를 하며 디자이너가 스크롤 컨트롤이 일정 이상 생기면 나타나는 위로가기 버튼을 만들어달라고 했다..ㅎ 어떻게 개발할지 고민도 안하고 바로 만들었다 ㅋㅋ 1. window.pageYOffset를 통해 Scroll 높이 읽어오기 Scroll의 값을 읽어온 후 UseState를 통해 isVisible의 Bool 값을 지정했다. * window.pageYOffset 현재 문서의 수직 방향으로 스크롤된 픽셀의 양을 나타내는 속성 const [isVisible, setIsVisible] = useState(false); const handleScroll = () => { const scrollTop = window.pageYOffset; if (scrollTop >= 400) { setIsVisible(tr.. 2023. 7. 7. [React] 배경화면 동영상 스크롤 제어 기능 코드 리뷰 PARD 동아리 웹사이트를 만들면서 웹사이트 HomePage에 처음 딱 들어왔을 때 동영상으로 이루어진 배경화면을 스크롤 제어를 통해 마치 스크롤에 따른 애니메이션 기능을 구현하고자 아래와 같은 코드를 짜봤다. GSAP(GreenSock Animation Platform)라는 라이브러리를 통해 웹 애니메이션을 구현하고자 하였다. gsap.to(window, {}) 를 통해 동영상의 재생과 정지를 스크롤에 따라 제어하였으며, window.pageYOffset; 를 활용하여 현재 스크롤 위치 정보를 저장하였다. videoPRogress를 계산하여 스크롤 값에 따라 비디오의 정지 포인트를 관리하였다. 아래는 내가 기능 구현을 위해 짜보았던 코드이다. import React, { useRef, useEffect.. 2023. 6. 7. 이전 1 다음
