iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 41

[十分鐘學習] fullPage.js - 全頁式導覽

example1

建立一個全頁式導覽的網站

GitHub Star: 22,000
Javascripting Overall: 88%
瀏覽器: ChromeFirefoxIE8+
RWD: 支援
License: MIT


《安裝》

  • CDN

    <!-- jQuery.js v1.11.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/vendors/jquery.easings.min.jss"></script>
    
    <!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/vendors/scrolloverflow.min.js"></script>
    
    <!-- fullPage.js v2.9.5 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet"  />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>
    
  • npm

    $ npm install fullpage.js
    
  • Bower

    $ bower install fullpage.js
    

《範例》

  • 包含導覽列的全頁式導覽

    <div id="example">
    	<div class="section"><h1>A</h1></div>
    	<div class="section"><h1>B</h1></div>
    	<div class="section"><h1>C</h1></div>
    	<div class="section"><h1>D</h1></div>
    </div>
    <script>
    	$( "#example" ).fullpage({
    		// 參數設定[註1]
    		navigation: true, // 顯示導行列
    		navigationPosition: "right" // 導行列位置
    	});
    </script>
    

    [註1]

    參數 描述
    menu 自訂選單
    lockAnchors 關閉錨點
    anchors 錨點,可透過超連結的方式,連至該頁面
    navigation 顯示導行列
    navigationPosition 導行列位置
    navigationTooltips 當滑鼠移至導覽列按鈕時,顯示的提示文字,也可以透過data-tooltip,去設定
    showActiveTooltip 顯示該頁面的導覽列按鈕顯示文字
    css3 啟動CSS效果
    scrollingSpeed 滾動速度(單位:毫秒)
    autoScrolling 手動滾動時,無法停留在頁面與頁面中間
    fitToSection 手動滾動時,在頁面與頁面中間停留,會強制移到下一頁面
    fitToSectionDelay 手動滾動時,在頁面與頁面中間停留多久時間停留,會強制移到下一頁面(單位:毫秒)
    scrollBar 顯示捲軸
    easing 轉場動畫速度
    easingcss3 CSS3轉場動畫速度
    loopBottom 啟動底部循環
    loopTop 啟動頂部循環
    loopHorizontal 啟動水平循環

《延伸》

  1. fullPage.js One Page Scroll sections Site Plugin
  2. alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

上一篇
[十分鐘學習] p5.js - 繪畫套件
下一篇
[十分鐘學習] Store.js - 前端微型暫存DB
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言