🐱 프론트엔드 랜딩페이지 만들기

• 간단한 프론트엔드 프로젝트로 동적인 랜딩페이지를 제작했습니다.

🐾 사용 스택

🐾 기능 설명

1) 움직이는 박스 고양이

첫 번째 기능! 페이지에 등장하는 박스 고양이에게 마우스 커서를 가져다대면, 사진이 확대됩니다.

2) 사진 무한 스크롤

두 번째 기능! 호두의 다양한 모습을 담은 6가지 사진들이 있습니다. 'Show More' 버튼을 누르면 무한스크롤로 새로운 이미지가 계속 생성되어 나타납니다. 모든 이미지가 출력되면 생성이 중단됩니다. 사진 보기를 종료하고 싶을 때는 'Show Stop' 버튼을 클릭해주세요.

3) 움직이는 KaKao Map

세 번째 기능! 카카오 맵 API를 활용하여 동적인 지도를 삽입했습니다. 이 지도는 사용자가 직접 이동, 확대, 축소하는 등 다양한 상호작용이 가능합니다.

4) 구독 Modal

네 번째 기능! 이메일을 입력하고 'Subscribe' 버튼을 누르면 호두의 modal창이 나타납니다. ok 버튼을 눌러서 다시 숨길 수 있습니다. 이메일 입력은 선택적입니다.

🐾 시연 영상

🐾 페이지 링크

https://drinkgalaxy.github.io/oreumi-front-mini-project/HODU.html