fullpage

 

요즘 포폴 작업한다고 fullpage 라이브러리를 쓰고 있다.

이 라이브러리를 쓰면서 적용한 방법을 기록한다.

 

도큐먼트를 봐도 뭔 말이야...? 하는 상황이 지속해서 오는 바람에 괜히 썼다고 생각하는 중... ㅠㅠ... 

라이브러리가 늘 그렇듯 뭐가 안 된다고 해서 js로 재커스텀을 하려고 하면 잘 안 되어서 내 뜻대로 되지 않는다.

 

 

 

 

1. 앵커 걸기.

구역 또는 슬라이드로 가는 링크 만들기

fullPage.js를 (anchors 옵션이나 각 구역마다 data-anchor 속성을 쓰셔서) 구역의 앵커 링크와 쓰신다면 앵커 링크를 통해 구역 내부 특정 슬라이드로 바로 가실 수 있습니다.

앵커가 들어간 링크 예시는 다음과 같습니다. http://alvarotrigo.com/fullPage/#secondPage/2 (해당 구역/슬라이드에 수동으로 가신다면 보시게 될 URL입니다) URL의 끝부분이 #secondPage/2로 끝나는 것에 주목해 주세요.

초기 설정이 다음과 같이 설정될 경우

new fullpage('#fullpage', {
	anchors:['firstPage', 'secondPage', 'thirdPage']
});

---

설명과 같이 js에 각 페이지별 앵커를 걸어주면 바로 사용 가능하다.

나는 다음과 같이 앵커를 걸어주었다.

 

$("#fullpage").fullpage({
          anchors: ['home', 'skills', 'works', 'contact']      
})

 

a 태그에 #앵커 를 해주면 그 구역으로 이동한다.

 

<a href="#skills">
    <div class="mousey">
        <div class="scroller"></div>
    </div>
</a>

a 태그에 걸린 #skills를 누르면 바로 그 페이지로 넘어가는 식이다.

 

1-2. 자동 높이 옵션(fp-auto-height-responsive)이 걸린 섹션으로 이동 시 상단을 비추게 하는 방법.

bigSectionsDestination: (기본값 null) 데모 모바일 지원(viewport)보다 더 큰 구역으로 어떻게 스크롤하는지 정의합니다. 기본 설정시 fullPage.js는 목적지 위에 있는 구역에서 내려오는 경우 상위로 스크롤하고 목적지 아래에 있는 구역에서 올라오는 경우 하위로 스크롤합니다. top, bottom, null 값이 가능합니다.

---

위에서부터 아래로 하나씩 메뉴를 클릭할 때는 제대로 섹션의 상위를 비추어주지만, 아래에서 위로 메뉴를 눌러봤을 때 섹션이 viewport보다 height가 긴 섹션은 탑을 보여주지 않고 바텀을 보여준다. 이럴 때 bigSectionsDestination 옵션을 top으로 바꾸어주면 제대로 작동된다. 이것은 fullpage 2.8.2부터 적용 가능한 듯함.

 

$("#fullpage").fullpage({
          ...
          bigSectionsDestination: top,
          ...
});

 

github.com/alvarotrigo/fullPage.js/issues/1854

Don't want to scroll to the bottom of a section · Issue #1854 · alvarotrigo/fullPage.js

 

 

2. 스크롤을 할 시 해당 섹션에 active 넣기

 

menu: (기본값 false) 선택자를 써서 구역에 링크할 메뉴를 구체적으로 정할 수 있습니다. 이렇게 하면 active 클래스를 써서 구역을 스크롤할때 메뉴에 있는 대응하는 요소가 활성화됩니다. 이렇게 하면 메뉴를 만드는 것이 아니라 active 클래스를 대응하는 앵커 링크와 함께 주어진 메뉴에 있는 요소에 추가만 합니다. 구역에 메뉴 요소의 링크를 걸기 위해서는 구역 안에서 사용된 것과 동일한 앵커 링크와 함께 사용하기 위해 HTML 5 데이터-태크(data-menuanchor)가 필요합니다. 다음은 예시입니다.

 

<ul id="myMenu">
	<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
	<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
	<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	menu: '#myMenu'
});

---

ul에 id를 넣어주고, 

li 에 앵커에 맞게 data-menuanchor 속성을 넣어주면 작동한다.

나는 a 태그에 active 스타일을 미리 적용해놔서 data-menuanchor을 a에 넣어주었다.

            <ul id="myMenu">
              <li>
                <a href="#home" class="menu_item" data-menuanchor="home">HOME</a>
              </li>
              <li>
                <a href="#skills" class="menu_item" data-menuanchor="skills" >SKILLS</a>
              </li>
              <li><a href="#works" class="menu_item" data-menuanchor="works">WORKS</a></li>
              <li><a href="#contact" class="menu_item" data-menuanchor="contact">CONTACT</a></li>
            </ul>

.menu__container .menu_item:hover,
.menu__container .menu_item.active {
  color: #fdfdfd;
}

$("#fullpage").fullpage({
          anchors: ['home', 'skills', 'works', 'contact'],
          menu: '#myMenu',
 })

 

3. 모바일에서 fullpage.js 해제

responsiveWidth: (기본값 0) 픽셀로 정의된 폭 아래에 정상 스크롤(autoScrolling:false)을 씁니다. 사용자가 자신만의 반응형 CSS에 쓰고 싶은 경우를 위해 fp-responsive 클래스가 바디 태그에 추가됩니다. 예를 들어 900에 설정되는 경우 브라우저의 너비가 900 미만이 될 때마다 플러그인이 정상 웹사이트처럼 스크롤됩니다.

---

responsiveWidth: 1100,

너비 1100px부터 fullpage를 깨트려줌.

 

 

4. 일부 구역만 스크롤바 생기게 하기

scrollOverflow: (기본값 false) 컨텐츠가 구역/슬라이드의 높이보다 더 큰 경우 스크롤을 만들지 여부를 정의합니다. true로 설정되면 컨텐츠가 플러그인으로 포장됩니다. 위임을 하거나 afterRender 콜백에 있는 다른 스크립트를 불러오시는 걸 고려해 보세요. true로 설정하시는 경우 scrolloverflow.min.js 벤더 라이브러리가 필요합니다. 이 파일은 fullPage.js 플러그인 이전에 불러와야 합니다 하지만 jQuery (사용하시는 경우) 후에. 다음은 예시입니다.

alvarotrigo/fullPage.js

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage.js"></script>

---

가장 적용하고 싶었고 가장 잘 안 되는 부분. ㅠㅠ...

완전히 마스터 한 건 아니지만 나는 다음과 같이 적용했다.

(오류가 진짜 너무 많이 터져서 결국 false 해두었음...)

 

 

HTML

    <script type="text/javascript" src="./js/fullpage/vendors/scrolloverflow.js"></script>
    <script src="./js/fullpage/fullpage.js"></script>

 

fullpage.js

options = $.extend({
  ...
  ...
  scrollOverflow: true,
  ...
  ...
})

 

압축파일을 풀어보면 vendors 폴더가 하나 더 있는데 그 안에 scrolloverflow.js 파일이 있다.

일반 스크롤을 적용하기 위해서 이 파일까지 반드시 적용해줘야 한다. (안 하면 넣어달라고 에러를 띄워줌)

scrolloverflow.js는 반드시 fullpage.js 이전에 삽입해야만 하며,

삽입한 후 fullpage.js의 scrolloverflow 옵션을 true로 바꿔준다.

 

또한 예제에서는 scrolloverflow.min.js 를 삽입하라고 쓰여있지만, 이 파일은 resize 이벤트가 적용되어있지 않기 때문에 창을 줄일 때 에러가 뜬다. scrolloverflow.min.js가 아닌 scrolloverflow.js로 삽입해주면 안 뜬다.

 

github.com/alvarotrigo/fullPage.js/issues/3095

"getPaddings is not defined" in scrolloverflow.js after resize · Issue #3095 · alvarotrigo/fullPage.js

(축소 버전 업데이트를 깜빡했다고 함 -ㅇ-;;)

 

 

더 자연스럽게 하기 위해서 스크롤만 보이는 해당 섹션에

 

<div class="section skill__section fp-auto-heigh fp-auto-height-responsive" id="section1">

 

 

을 추가해주었다.

자동으로 높이를 잡아주며 반응형에서도 자동으로 높이를 잡아주어 스크롤이 생기는 것을 방지해준다.

 

그래도 억지로 만든 것 같고 부자연스러워서 불만족 중 -_ㅠ;;......

 

 

 

 

 

---

 

그 밖에 도움이 되는 tip들

m.blog.naver.com/hygge-1ife/221349120607

[제이쿼리] fullpage.js 기능