使用fullPage.js設計單頁式選單滑動區塊的全屏滾動網站

6 月 25, 2018 | | 0 條留言

Demo | 官網

經常能見到單頁式使用選單滑動區塊的網站,我們稱為全屏滾動網站(也稱為單頁網站),尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內容,顯得格外的高端大氣上檔次。比如iPhone 5C的介紹頁面(查看)。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試試fullPage.js。

fullPage.js 是一個基於jQuery 的插件,它能夠很方便、很輕鬆的製作出全屏網站,主要功能有:

  • 支持鼠標滾動
    * 支持前進後退和鍵盤控制
  • 多個回調函數
  • 支持手機、平板觸摸事件
  • 支持CSS3 動畫
  • 支持窗口縮放
  • 窗口縮放時自動調整
  • 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

兼容性

jQuery 兼容
兼容jQuery 1.7+。

瀏覽器兼容

使用方法

  1. 引入文件

    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <script src="js/jquery.min.js"></script>
    
    <!-- jquery.easings.min.js 用於easing 參數,也可以使用完整的jQuery UI 代替,如果不需要設置easing 參數,可去掉改文件-->
    <script src="js/jquery.easings.min.js"></script>
    
    <!-- 如果scrollOverflow 設置為true,則需要引入jquery.slimscroll.min.js,一般情況下不需要-->
    <script src="js/jquery.slimscroll.min.js"></script>
    
    <script src="js/jquery.fullPage.js"></script>
  2. HTML

    <div id="dowebok">
        <div class="section">
            <h3>第一屏</h3>
        </div>
        <div class="section">
            <h3>第二屏</h3>
        </div>
        <div class="section">
            <h3>第三屏</h3>
        </div>
        <div class="section">
            <h3>第四屏</h3>
        </div>
    </div>

    每個section 代表一屏,默認顯示"第一屏",如果要指定加載頁面時顯示的"屏幕",可以在對應的section 加上class="active",如:

    <div class="section active">第三屏</div>

    同時,可以在section 內加入slide,如:

    <div id="dowebok">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">
            <div class="slide">第三屏的第一屏</div>
            <div class="slide">第三屏的第二屏</div>
            <div class="slide">第三屏的第三屏</div>
            <div class="slide">第三屏的第四屏</div>
        </div>
        <div class="section">第四屏</div>
    </div>
  3. JavaScript

    $(function(){
        $('#dowebok').fullpage();
    });

配置

  1. 選項

    選項類型默認值說明
    verticalCentered字符串true內容是否垂直居中
    resize布爾值false字體是否隨著窗口縮放而縮放
    slidesColor函數設置背景顏色
    anchors數組定義錨鏈接
    scrollingSpeed整數700滾動速度,單位為毫秒
    easing字符串easeInQuart滾動動畫方式
    menu布爾值false綁定菜單,設定的相關屬性與anchors 的值對應後,菜單可以控制滾動
    navigation布爾值false是否顯示項目導航
    navigationPosition字符串right項目導航的位置,可選left 或right
    navigationColor字符串#000項目導航的顏色
    navigationTooltips數組項目導航的tip
    slidesNavigation布爾值false是否顯示左右滑塊的項目導航
    slidesNavPosition字符串bottom左右滑塊的項目導航的位置,可選top 或bottom
    controlArrowColor字符串#fff左右滑塊的箭頭的背景顏色
    loopBottom布爾值false滾動到最底部後是否滾回頂部
    loopTop布爾值false滾動到最頂部後是否滾底部
    loopHorizo​​ntal布爾值true左右滑塊是否循環滑動
    autoScrolling布爾值true是否使用插件的滾動方式,如果選擇false,則會出現瀏覽器自帶的滾動條
    scrollOverflow布爾值false內容超過滿屏後是否顯示滾動條
    css3布爾值false是否使用CSS3 transforms 滾動
    paddingTop字符串0與頂部的距離
    paddingBottom字符串0與底部距離
    fixedElements字符串
    normalScrollElements
    keyboardScrolling布爾值true是否使用鍵盤方向鍵導航
    touchSensitivity整數5
    continuousVertical布爾值false是否循環滾動,與loopTop 及loopBottom 不兼容
    animateAnchor布爾值true
    normalScrollElementTouchThreshold整數5
  2. 方法

    名稱說明
    moveSectionUp()向上滾動
    moveSectionDown()向下滾動
    moveTo(section, slide)滾動到
    moveSlideRight()slide 向右滾動
    moveSlideLeft()slide 向左滾動
    setAutoScrolling()設置頁面滾動方式,設置為true 時自動滾動
    setAllowScrolling()添加或刪除鼠標滾輪/觸控板控制
    setKeyboardScrolling()添加或刪除鍵盤方向鍵控制
    setScrollingSpeed()定義以毫秒為單位的滾動速度