DosirakTong

도시락통 - 웹사이트 반응형 리디자인
배포주소 : https://circleyoo.github.io/DosirakTong/

💼 작업기간

1인 제작
2023.04.18 ~ 2023.05.01

⚙ 개발환경

JavaScript(ES6)
HTML5
SCSS

✔ 주요기능

• AOS 라이브러리를 사용한 스크롤 애니메이션 효과 구현

HEADER

• 미디어 해상도에 따른 구조 변경 ( 1920px / 1024px~ )
• 모바일형 메뉴 제작

MAIN VISUAL

• fetch를 이용한 JSON데이터를 가져와 내용 및 이미지 변경
• 포커스 라인 애니메이션 실행

SERVICE CATEGORY

• Swiper 라이브러리를 이용하여 슬라이드 효과 구현

Top Button

• Waypoint.js를 사용하여 스크롤 이벤트에 따른 동작 구현
  • Main Visual 영역을 지나가면 화면에 표시
  • 페이지 최하단에 닿으면 클래스를 추가하여 위치 이동