패럴랙스 스크롤링 기반 랜딩페이지
Beagle에 대해 간단히 소개해보는 패럴랙스 스크롤링 기반 랜딩페이지를 만들었습니다. 패럴랙스 스크롤링(Parallax Scrolling)은 스크롤 할때 시차가 느껴지도록 만드는 효과를 이야기합니다.
next.js 12버전으로 작업했으며, Framer motion과 react-intersection-observer를 활용해 스크롤 기반 패럴랙스 효과를 구현했습니다.
배경과 비글 이미지를 따로 레이어 별로 분리하기 위해 직접 그린 일러스트레이션을 활용하였습니다.
실제 구현된 사이트는 아래 링크에서 확인할 수 있습니다.