全屏滾動網頁 fullPage.js

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。

從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。

FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~

圖片來源 https://github.com/alvarotrigo/fullpage.js

https://alvarotrigo.com/fullPage
fullPage.js 是一款滿多人使用的全屏滾動網頁框架，官網右上角 Examples 範例滿多的，例如 https://alvarotrigo.com/fullPage/examples/navigationV.html
就是很好的範例，也就是說這類型的網頁可以考慮使用 fullPage.js 來開發。

fullPage.js 的基本架構是

<div id="your_wrapper_id">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

如果說把全屏滾動網頁形容成上下播放的投影片，一個 section 就是其中一張投影片，以上方程式碼來說，這個網頁包含四張投影片，外部要用一個 wrapper 包住 (不能是<body>)，網頁初始化時

$('#your_wrapper_id').fullpage({
    ....
});

…. 處可以填一些 option, 例如 sectionsColor 和 anchors 是常用的兩個 option

$('#your_wrapper_id').fullpage({
    anchors: ['firstPage', 'secondPage', '3rdPage'],
    sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
});

anchors 指定每個 section 的頁內位置，例如第二個 section 就是 http://你的網址#secondPage
sectionsColor 指定每個 section 的背景顏色。

在一個 section 裡也可以塞一些橫的投影片

<div class="section">
    <div class="slide"> Slide1 </div>
    <div class="slide"> Slide2 </div>
    <div class="slide"> Slide3 </div>
</div>

有的設計會在網頁上方固定一個 menu (不隨頁面捲動)，html 寫法如下

<ul id="your_menu_wrapper">
    <li data-menuanchor="your_anchor1"> Menu1 </li>
    <li data-menuanchor="your_anchor2"> Menu2 </li>
    <li data-menuanchor="your_anchor3"> Menu3 </li>
</ul>

需要跟 fullPage 註冊

$('#your_wrapper_id').fullpage({
    menu: '#your_menu_wrapper',
    ....
});

註冊後當捲到某一個 section 時, 對應的 anchor 的 <li> 會自動加上 class="active", 開發者就可以在上面做 style.

很多全屏滾動網頁會在右方有「點點點」導覽，例如這範例頁的右側
https://alvarotrigo.com/fullPage/examples/navigationV.html
初始化時需要下 navigation: true
橫的 slide 也可以有「點點點」導覽，下 slidesNavigation: true
另外還有一些 option: navigationPosition, navigationTooltips 等，可以自行查一下官網，此處不再贅言。

有時候會希望在顯示 section 時加一點動畫 (例如有些手機廠商網頁，往下捲時手機會移動浮現之類)，這時候就需要 fullPage 的 callbacks, 在裡面做動畫：
onLeave (離開 section)
afterLoad (進入 section)
onSlideLeave (離開 slide)
afterSlideLoad (進入 slide)

fullPage.js 預設每個 section 高度佔滿整個 viewport, 官網有提到可以達成單 section auto height, 但如果要使用 fullPage.js, 再去改成每個 section auto height, 是沒有意義的。

“It is possible to create sections which height is smaller or bigger than the viewport. This is ideal for footers. It is important to realise that it doesn't make sense to have all of your sections using this feature.”

因為 fullPage.js 每個 section 高度佔滿整個 viewport, 所以他只適合類似投影片上下捲動的設計，不太適合有連續性的一頁式網頁，或是每個 section 自訂高度的網頁。