fullPage學習

---

學習目標:

• 可以說出fullpage插件的使用基本思路
• 能寫出購物案例屏幕滾動效果及其側邊欄製做
• 能寫出第一屏佈局及其動畫效果
• 能寫出第二屏佈局及其動畫效果
• 能寫出第三屏佈局及其動畫效果
• 能寫出第4、5、6、七屏佈局及其動畫效果
• 能寫出第八屏佈局及其動畫效果

• 能寫出添加鍵盤滾動以及從新開始播放動畫

  typora-copy-images-to: media

---

---

購物網站宣傳頁面

案例目的：

1. 複習---複習前面學過的HTML5+CSS3
2. 綜合---綜合運用jquery完成案例
3. 拓展---能夠作宣傳頁面或者我的簡歷

fullpage 全屏插件

全屏滾動效果，原生js也很好實現，主要是用 mousewheel 鼠標滾輪滾動事件， 來判斷上滾動仍是下滾動，以後設置每次滾動的高度爲屏幕的高度便可。可是，雖然效果簡單，可是兼容性不好，要作不少兼容處理及比較麻煩啦！（瞭解一下，有興趣的同窗能夠研究一下）

fullPage.js 是一個基於 jQuery 的插件，它可以幫你很方便、很輕鬆的製做出全屏網站。

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

中文演示地址 http://www.dowebok.com/demo/2014/77/

主要功能有：

支持鼠標滾動

支持前進後退和鍵盤控制

多個回調函數

支持手機、平板觸摸事件

支持 CSS3 動畫

支持窗口縮放

窗口縮放時自動調整

可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

引用文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
 <!-- jquery.easings.min.js 是必須的，用於 easing 參數，也可使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
 <script src="js/jquery.fullPage.js"></script>

HTML 結構

<div id="fullpage">
    <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>

JavaScript入口函數

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

fullpage 詳細參數

選項	類型	默認值	說明
verticalCentered	字符串	true	內容是否垂直居中
resize	布爾值	false	字體是否隨着窗口縮放而縮放
sectionColor	函數	無	設置背景顏色
anchors	數組	無	定義錨連接
scrollingSpeed	整數	700	滾動速度，單位爲毫秒
easing	字符串	easeInQuart	滾動動畫方式
menu	布爾值	false	綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單能夠控制滾動
navigation	布爾值	false	是否顯示項目導航
navigationPosition	字符串	right	項目導航的位置，可選 left 或 right
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

fullPage.js 方法

注意方法的使用時須要添加：

$.fn.fullpage 好比

$.fn.fullpage.moveTo(1);

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

回調函數

名稱	說明
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個參數

jQuery Easing.js 插件

介紹：easing是jquery的一個插件，使用它能夠建立更加絢麗的動畫效果。

環境：由於easing是jQuery的插件，因此必須是在引入jquery以後再引入它

若是隻想要簡單的寫法就用

$(".car").animate({"left": "150%"},  4000, "easeInElastic", function() {});

easing:格式爲json,{duration:持續時間,easing:過渡效果,complete:成功後的回調函數}

$(element).animate({ 
    height:500, 
    width:600 
    },{ 
    easing: 'easeInOutQuad', 
    duration: 500, 
    complete: function(){} 
});

1. linear
2. swing
3. easeInQuad
4. easeOutQuad
5. easeInOutQuad
6. easeInCubic
7. easeOutCubic
8. easeInOutCubic
9. easeInQuart
10. easeOutQuart
11. easeInOutQuart
12. easeInQuint
13. easeOutQuint
14. easeInOutQuint
15. easeInExpo
16. easeOutExpo
17. easeInOutExpo
18. easeInSine
19. easeOutSine
20. easeInOutSine
21. easeInCirc
22. easeOutCirc
23. easeInOutCirc
24. easeInElastic
25. easeOutElastic
26. easeInOutElastic
27. easeInBack
28. easeOutBack
29. easeInOutBack
30. easeInBounce
31. easeOutBounce
32. easeInOutBounce

https://matthewlein.com/experiments/easing.html

動畫複習

視差滾動插件

視差滾動（Parallax Scrolling）指網頁滾動過程當中，多層次的元素進行不一樣程度的移動，視覺上造成立體運動效果的網頁展現技術

主要核心就是前景和背景以不一樣的速度移動，從而創造出3D效果。 這種效果能夠給網站一個很好的補充。

特性

視差滾動效果酷炫，適合於個性展現的場合。

視差滾動徐徐展開，適合於娓娓道來，講故事的場合。

視差滾動容易迷航，須要具有較強的導航功能。

原理

傳統的網頁的文字、圖片、背景都是一塊兒按照相同方向相同速度滾動的，而視差滾動則是在滾動的時候，內容和多層次的背景實現或不一樣速度，或不一樣方向的運動。

有的時候也能夠加上一些透明度、大小的動畫來優化顯示。

利用background-attachment屬性實現。

background-attachment: fixed || scroll || local

Stellar.js是什麼？

stellar.js 是一個 jQuery插件，能很容易地給網站添加視差滾動效果。 儘管已經中止了維護，但它很是穩定，與最新版本的jQuery兼容，不少開發者也在使用它。 這個插件在jQuery插件庫裏很流行。

http://markdalgleish.com/projects/stellar.js/ 官網

引用 js包

<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>

引用html

<div class="content" id="content1">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content2">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>

引入CSS

body {
    font-size: 20px;
    color: white;
    text-shadow: 0 1px 0 black, 0 0 5px black;
}
p {
    padding: 0 0.5em;
    margin: 0;
}
.content {
    background-attachment: fixed;
    height: 400px;
}
#content1 {
    background-image: url("xxx.jpg");
}
#content2 {
    background-image: url("xxx.jpg");
}
#content3 {
    background-image: url("xxx.jpg");
}
#content4 {
   background-image: url("xxx.jpg");
}
#content5 {
   background-image: url("xxx.jpg");");
}
#content6 {
    background-image: url("xxx.jpg");
}

js調用函數

$.stellar({
    horizontalScrolling: false,
    responsive: true
});

詳細參數

名稱	說明
horizontalScrolling 和 verticalScrolling	該配置項用來設置視差效果的方向。horizontalScrolling設置水平方向，verticalScro設置垂直方向， 爲布爾值，默認爲true
responsive	該配置項用來制定load或者resize時間觸發時是否刷新頁面，其值爲布爾值，默認爲false
hideDistantElements	該配置項用來設置移出視線的元素是否隱藏，其值爲布爾值，若不想隱藏則設置爲false`
data-stellar-ratio="2"	定義了此元素針對頁面滾動的速度比率，好比，0.5爲頁面滾動的50%，2爲頁面滾動的200%，因此數值越大，你能夠看到頁面元素滾動速度越快。
data-stellar-background-ratio	該配置項用在單個元素中，其值爲一個正數，用來改變被設置元素的影響速度。 例如 值爲0.3時，則表示背景的滾動速度爲正常滾動速度的0.3倍。若是值爲小數時最好在樣式表中設置