Web/HTML,CSS,JS
-
CSS ) Animate on Scroll 스크롤 애니매이션 구현Web/HTML,CSS,JS 2022. 1. 19. 15:19
새로운 프로젝트를 시작하며 준비기간 동안 하고 싶었던 공부를 하고 있는데 벤치마킹을 하며 여러 쇼핑몰을 돌아보니 https://lckshop.com/ LCKshop.com - LCK샵 LCKshop.com - LCK샵 The official Online Shop of LCK lckshop.com 이 사이트처럼 애니메이션 css를 도입하면 좋을 거 같아서 Hook으로 만들어 적용해 보자 라는 생각에 여러 가지 블로그와 깃허브를 참고했습니다. 구현 결과 화려하진 않지만 나름 쓸만 합니다. 구동방식은 다음과 같습니다. 특정 element를 사용자가 보고 있는지 확인한다 Animation을 실행한다. 이벤트를 DOM에 지정한다. hook을 실행하기전 props값을 받아 재사용성을 고려합니다. const useS..