구현 화면

Hnet-image (5)

🏠 사이트 주소 https://marvel-galleryy.netlify.app/

사용 기술: framer-motion

프로젝트 소개

마블 api를 활용하여 marvel comics 정보를 확인 할 수 있는 서비스 를 제작하였습니다. framer-motion을 활용하여 웹사이트에서 자주 사용되는 애니메이션 들을 구현해 보고 싶었습니다.

구현 내용

-slider -modal pop-up animation -modal 오버레이 클릭 감지 -modal 스크롤에 상관없이 화면 중앙에 띄우기 -스크롤 감지해서 header 색 바꾸기 -검색 창 열고 닫는 animation