728x90 반응형 스크롤 애니메이션1 Intersection Observer API: 스크롤링에 따라 엘리먼트가 짠!하고 나타나게 해주는 애니메이션을 만들고 싶을 때 채용 과제를 만들면서 틈틈이 파이널 프로젝트 개선 작업을 진행하고 있다. 사각사각의 랜딩 페이지를 수정하면서 커스텀 훅을 하나 만들었는데, 이 훅이 하는 일이 바로 마치 스크롤링을 할 때마다 무언가(?!)에 맞추어 페이지 요소들이 짠!하고 나타나는 것처럼 보이는 애니메이션을 추가하는 것이다. 백문이 불여일견! 애니메이션 추가 Before와 After를 살펴보자. 단순한 parallax만 적용되어 있다. Parallax는 그대로, 거기에 스크롤링에 따른 슬라이드인 애니메이션을 더했다 완전 동일한 디자인이지만, 화면에 표시되는 엘리먼트들에 스크롤링에 따른 slide-in 애니메이션을 추가했더니 조금 더 역동적인 모습이 연출되는 것 같다. 물론 메인 랜딩 디자인은 수정할 예정이지만, 그럼에도 불구하고 나의 커.. 2021. 8. 18. 이전 1 다음 728x90 반응형
