fullPage.js 기본 (+ 보너스: footer에서 앵커 없애기)

첫 회사 포트폴리오 만들 때도 사용했던 fullPage.

업무중에 다시 만났다. 

하나도 안반갑다.

 

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css">

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

 

 

잘 챙겨야될 것은 fullpage 영역 안에 들어가는 각각의 태그들에 section 클래스를 달아주면 되고, 

보통 footer의 경우는 높이를 100vh나 차지하지 않기때문에...

그냥 강제로 높이지정 해버렸더니 자연스럽게 스크롤 됨.

 

+ 클라이언트가 추가로 요청한 사항인데 

footer 영역에선 굳이 앵커가 필요 없다며 footer까지 스크롤이 들어갔을 때 앵커를 아예 없애달라고 했다.

 

개발자도구를 켜보면 

스크롤해서 각 섹션에 도달할 때 마다 body의 클래스명이 바뀌는 걸 확인할 수 있다.

앵커를 없애거나 뭔가 변화를 주고싶은 영역에서의 body 클래스명을 확인한 후 

jquery를 이용해 쉽게 변경 가능. (코드펜 참고)