react-intersection-observer1 [react] scroll-snap-type 옵션, react-intersection-observer 기본 활용 이력서와 포폴용으로 사이트를 만들기 위해서 초기 세팅을 하고 컴포넌트를 스크롤로 이동하면서 이동 시 해당 컴포넌트의 애니메이션을 추가하고 싶어서 CSS의 scroll-snap-type 와 react-intersection-observer 옵션을 활용해서 적용해봤다. 두 가지 기능을 사용한 이유 한 번 스크롤를 해서 한 번에 다음 컴포넌트가 보여지도록 하고 싶었고 스크롤이 되고 컴포넌트가 화면에 보여지는 순간 준비됐던 애니메이션이나 효과들이 적용되었으면 해서 팀프로젝트에서 사용했던 경험과 검색을 통해서 찾은 2가지 기능으로 아주 간단하게만 적용시켜봤다. 1. scroll-snap-type https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type .. Frontend 2022. 10. 10. 더보기 ›› 이전 1 다음
