프로젝트 정보

http://pjdesign.co.kr/kor/


일정

날짜 작업 항목 세부 내용 사용 기술
Day 1 프로젝트 셋업 + 표지 구조 작업 폴더 구조 구성, 기본 HTML/CSS 세팅.hero-text 위한 span 분리하여 텍스트 블러 사전 구현 HTML, CSS, JS
Day 2 표지 GSAP 애니메이션 구현 Blur → Clear + Y축 이동, 순차(stagger) 등장 완성 GSAP, SplitText, .from() 애니
Day 3 메뉴바 구조 + 애니메이션 메뉴 항목 컴포넌트화좌측부터 줄(line) fade-in 애니 CSS, GSAP hover, line grow
Day 4 섹션 1 구조 셋업 이미지 full-cover 배치텍스트 파트 3개로 나누기 HTML, CSS Layout
Day 5 섹션 1 스크롤 애니메이션 ScrollTrigger 기반 3단계 텍스트 등장 연출 GSAP.timeline
Day 6 섹션 2 구조 + 텍스트 GSAP .section-2 텍스트 fade-up 구현 GSAP scroll Trigger
Day 7 섹션 2 슬라이드 구성 Swiper 슬라이드 초기화스크롤과 연동하여 slideTo() 적용 Swiper, ScrollTrigger 연동
Day 8 섹션 3 구조 + 단계 애니메이션 텍스트/desc/이미지 동시 Fade-in 연출 GSAP 순차 대응
Day 9 섹션 6 무한 캐러셀 + 4섹션 애니 loop 슬라이드 완성 + shrik & fade 효과 구현 Swiper loop, GSAP scale/opacity
Day 10 반응형 + 최종 디버그 1280px 기준 대응, 내용 검토 및 최종 보완, 코드 정리 Media Queries, QA

진행상황


구조 분석

1. menu

image.png

Mian > section1

image.png

Mian > section1

image.png

image.png

Main > section2