🍷 Pinea 사이트 클론코딩.

바로가기 : https://light9639.github.io/Pinea/

✨ Pinea 사이트입니다 ✨

📆 개발인원 및 기간

• 1인 개발 : 작업기간: 5일

🎯 개발 목적

• 기존 Pinea 사이트를 처음부터 끝까지 구현해보았습니다.

✒️ 구현기능

• header 왼쪽 부분 버튼을 클릭시 메뉴 목록이 나오도록 작성하였습니다.
• GSAP 을 이용하여 각각의 텍스트와 이미지를 가로와 세로로 이동하도록 작성하였습니다.
• lenis를 사용하여 스크롤을 할 때, 부드럽게 스크롤 되도록 작성하였습니다.

🛠️ 적용 기술

⚡ HTML5

• HTML5를 시멘틱한 구조와 웹표준 및 웹접근성에 준수하는 마크업으로 작성했습니다.

⚡ SCSS

• SCSS를 각각의 폴더를 만들어 활용하여 디자인하였고, @mixin을 이용하여 반응형 웹 적용을 더 쉽게 하였습니다.
• 버튼 Hover 시에 애니메이션 효과를 주도록 작성하였습니다.

⚡ JavaScript, jquery

• script에 defer를 사용하여 DOM이 준비된 이후 실행되도록 하였습니다.
• header 왼쪽 부분 버튼을 클릭시 메뉴 목록이 나오도록 작성하였습니다.

⚡ Swiper

• inner5, inner8 부분을 swiper를 사용하여 작성하였습니다.

⚡ GSAP

• GSAP을 이용하여 여러 html 태그에 data-parallax-y, data-parallax-x를 넣은 다음 forEach 반복문을 사용하여 가로와 세로로 이동하도록 작성하였습니다.
• inner6를 스크롤할 때 onUpdate를 사용하여 4부분으로 나눠서 html 태그가 나타나도록 수정하였습니다.

⚡ Lenis

• lenis를 사용하여 스크롤을 할 때, 부드럽게 스크롤 되도록 작성하였습니다.