fullpage.js

fullpage plugin

div id fullpage 안에 
class section 들로 구성 -> 보여줄 페이지 즉 스크롤할게 5개면 
이걸 5개만든다 / div든 section이든 어떤태그이던 class를 section으로 기입

여기서 동일 클래스 선택을 못하니까 id값으로 섹션별 구분 

헤더를 매 스크롤시 픽스하려면 div id fullpage 벗어나서 기입 + position fixed
한번만 나올거면 맨 상단 section안에 포함해서 기입 

슬라이드넣을거면 섹션안에 div class slide하면 이 div를 슬라이드한다는거 
이거는어떤 리스트만 슬라이드되는게아니라 전체 페이지 자체가 슬라이드됨 
리스트형식 슬라이드할거면 다른 플러그인쓰는게 나음

method는 body끝나기전 밑에 기입함 

header를 먼저작성하는게 gnb anchor해야되기때문 
메뉴 a href #menu1 이런식으로 menu라는 이름짓고 링크걸어줌 
그리고 그 해당 섹션에 data-anchor="menu1" 이렇게 여기로 링크하라고 기입

이 부분은 method작성에 추가를 해야함
 anchors: ['menu1', 'menu2', 'menu3', 'menu4'],
이름이 변경되면 변경해서 넣는거 

백그라운드는 center center cover해줘야하고 

비디오태그는 loop muted playsinline data-autoplay 속성을 넣어줘야하고 
사이즈 화면에 채울려면 
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    width: 100%; height: 100%; object-fit: cover;
해주고 relative를 슬라이드에 하면 슬라이드에 기입 

푸터같이 전체 풀로 채우는게아니고 
지정한 영역만큼만 나오게하려면 class section에 fp-auto-height 추가 

풀페이지는 세로중앙에 배치하도록 설정이 되어있어서 
내가 위 아래 위치잡으려 패딩 줄 필요 x 
반응형 들어가게되면 공간 주면 됨

※fp-auto-height는 height가 auto !important로 잡혀있어서 
패딩으로 잡으면 됨 

메인비주얼에 이 밑으로 스크롤하라는 부분을 만들거 애니메이션으로 
백그라운드만 움직이면 되니까 keyframes에 background-position으로 효과줌 

스크롤트리거는 이미 fullpage자체에 스크롤이 먹혀있어서 
검사들어가보면 이 섹션을 보여줄때 active라는 클래스가 추가되어있는걸 볼수있음 
그러면 해당섹션.active를 css에 기입하면 
이 active되었을때 애니메이션을 기입하면 스크롤트리거랑 같은 역할을 할수있음