fullpage.js

簡介

前幾天做了一個全屏網站效果，你可以試試 fullPage.js。

fullPage.js 是一個基於 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網站，主要功能有：

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

 

fullpage.js demo

http://www.dowebok.com/demo/2014/77/  

 

animate.css demo

https://daneden.github.io/animate.css/

fullpage.js 下載

https://github.com/alvarotrigo/fullPage.js

下載Animate.css

https://daneden.github.io/animate.css/

 

1、如何使用fullpage.js

引用文件：

1 2 3 4 5 6 7 8 9 10

< 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>

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>

JavaScript 代碼

$( function (){

     $( '#dowebok' ).fullpage();

});

 

配置fullpage.js

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	滾動到最頂部后是否滾底部
loopHorizontal	布爾值	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()	定義以毫秒為單位的滾動速度

3、回調函數

名稱	說明
afterLoad	滾動到某一屏后的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算
onLeave	滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數：index 是離開的“頁面”的序號，從1開始計算；   nextIndex 是滾動到的“頁面”的序號，從1開始計算； direction 判斷往上滾動還是往下滾動，值是 up 或 down。
afterRender	頁面結構生成后的回調函數，或者說頁面初始化完成后的回調函數
afterSlideLoad	滾動到某一水平滑塊后的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數
onSlideLeave	某一水平滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數

2、如何使用Animate.css

animate.css 是一個css3動畫庫，可以到上面提到的github上去下載，里面預設了很多種常用的動畫，使用也很簡單，因為它是把不同的動畫綁定到了不同的類里，所以我們想要使用哪種動畫的時候，只需要簡單的把那個相應的類添加到元素上就行了：

首先在head中引入下載的animate.css文件

然后你想要哪個元素進行動畫，就給那個元素添加上animated類 以及特定的動畫類名，animated是每個要進行動畫的元素都必須要添加的類。

假設使用jquery，要給一個id為demo的元素添加一個搖動的動畫,因為搖動的動畫類名為shake，所以代碼是這樣的：

這樣載入頁面，元素就能動起來了。你也可以在動畫完成后，把動畫類移除，以便可以再次進行同一個動畫。

 

至於動畫的配置參數，比如動畫持續時間，動畫的執行次數等等，你可以在你的的元素上自行定義，覆蓋掉animate.css里面所定義的就行了。

注意這些屬性還要記得加上各瀏覽器的前綴。

總之是很靈活的，說到底不就是一個css文件嗎，一看就懂的，你在里面想怎么整就怎么整，不想用它提供的類名，就在里面改掉就行了。如果你只想用里面的部分動畫，也可以把那些要使用的動畫分離出來。

 

3、自己做的demo

https://github.com/ben-Run/CSS3/tree/master/fullpagejs-demo