FullPage.js全屏滾動插件解說

時間 2019-11-13

標籤 fullpage.js fullpage 全屏滾動插件解說欄目 JavaScript 简体版

原文原文鏈接

1.主要功能

1）.支持鼠標滾動
2）.多個回調函數
3）.支持手機、平板觸屏事件
4）.支持css3動畫
5）.支持窗口縮放
6）.窗口縮放時自動調整
7）.可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等javascript

2.結構

使用HTML代碼第一行上的強制HTML DOCTYPE聲明啓動HTML文檔。不然，你可能會遇到段高的問題。提供的示例使用HTML 5 doctype <!DOCTYPE html>。

css

3.配置

1).sectionColor:
能夠爲每個section設置background-color屬性。
例如：
　　　　$('#fullpage').fullpage({ 　　　　sectionColor: ['green','orange','gray','red']; 　　　　});

2).controlArrows
定義是否經過箭頭來控制slide幻燈片，默認爲true。當咱們設置爲false，則幻燈片左右兩側的的箭頭就會消失，在移動設備上，能夠經過滑動來操做幻燈片。

3)controlArrowColor

4).verticalCentered:
　　　每一頁的內容是否垂直居中，默認爲true。通常咱們保持默認值
5).resize:
　　字體是否隨着窗口縮放而縮放，默認爲false
6).scrollingSpeed:
　　滾動速度，單位爲毫秒，默認爲700html

7).anchors:
　　定義錨連接，默認值爲[]。有了錨連接，用戶就能夠快速打開定位到某一頁面。
　　　注意定義錨連接的時候，值不要和頁面中任意id或name相同，尤爲是在IE瀏覽器下，並且定義時不須要加#
menu
　綁定菜單，設定的相關屬性與anchors的值對應後，菜單能夠控制滾動，默認爲false。能夠設置爲菜單的jquery選擇器java

8).lockAnchors:
　　　是否鎖定錨連接，默認爲false。若是設置爲true，那麼定義的錨連接，也就是anchors屬性則沒有效果，這個配置項使用比較少
9).active：
　　　　在頁面中爲某一個section添加了active以後，默認當窗口打開時會定位到此active，顯示當前頁
10).easing:
　　　　　定義頁面section滾動的動畫方式，默認爲easeInOutCubic，若是修改此項，須要引入jquery。easings插件，或者jquery ui。
11).css3:
　　　　是否使用css3 transforms來實現滾動效果，默認爲true。這個配置項能夠提升支持css3的瀏覽器，好比移動設備等的速度，若是瀏覽器不支持css3，則會使用jquery來替代css3實現滾動效果。即優雅降級，使用jquery實現動畫，通常來講，它的性能不如css動畫來得快。
12).navigation: true,
右側的原點導航按鈕顯示與否，默認不顯示，爲true顯示原點按鈕
注意：按鈕樣式要修飾下，實在是太醜啦，好傷眼！！！！

13).navigationTooltips:
導航小圓點的tooltips設置鼠標通過時顯示的名字，默認爲[]，注意按照順序設置。
navigationTooltips: ['首頁', '視覺', '交互', '皮膚', '功能']

14).navigationPosition
項目導航的位置，可選 left 或 right,默認爲right
navigationPosition:"left"

15.navigationColor
項目導航的顏色
不起做用
16).slidesNavigation
是否顯示左右滑塊的項目導航，默認值爲false
咱們能夠利用這樣設置左右滑動的帶原點的項目
額，樣式也要改下，真傷眼
slidesNavigation:"true"

17).slidesNavPosition
左右滑塊的項目導航的位置，可選 top 或 bottom,默認爲bottom
slidesNavPosition:"top"

18).loopTop:
滾動到最頂部後是否連續滾動到底部，默認爲false。
loopTop:"true"
滾到第一屏向上滾會回最後一屏
19).loopBottom：
滾動到最底部後是否連續滾動回頂部，默認爲false。
loopBottom:"true"
滾到最後一屏向下滾會回第一屏
20).loopHorizontal：
橫向slider幻燈片是否循環滾動，默認爲true。設置爲false時，在第一個slider時，沒有向左滾動的箭頭，不能向左滾動。同理，最後一個slider時，沒有向右滾動的箭頭，不能向右滾動。
21).autoScrolling：
　　　　是否使用插件的滾動方式，默認爲true，若是選擇false，則會出現瀏覽器自帶的滾動條，將不會按頁滾動，而是按照滾動條的默認行爲來滾動。
22).scrollBar：
　　　　是否包含滾動條，默認爲false，若是設置爲true，則瀏覽器自帶的滾動條出現，頁面滾動時仍是按頁滾動，可是滾動條的默認行爲也有效。
23).paddingTop/paddingBottom：
　　　　設置每個section頂部和底部的padding，默認都爲0.通常若是咱們須要設置一個固定在頂部或者底部的菜單、導航、元素等，能夠使用這兩個配置項。
24).fixedElements：
　　　　固定的元素，默認爲null，須要配置一個jquery選擇器。在頁面滾動的時候，fixedElements設置的元素固定不動。
25).keyboardScrolling：
　是否能夠使用鍵盤方向鍵導航，默認爲true。
26).touchSensitivity：
　在移動設備中滑動頁面的敏感性，默認爲5，是按百分比來衡量，最高爲100，越大則越難滑動。
27).continuousVertical:
　　　　是否循環滾動，默認爲false。若是設置爲true，則頁面會循環滾動，而不像loopTop或loopBottom那樣出現跳動，注意這個屬性和loopTop、loopBottom不兼容，不要同時設置。
28).animateAnchor：
　　　　錨連接是否能夠控制滾動動畫，默認爲true。若是設置爲false，則經過錨連接定位到某個頁面顯示再也不有動畫效果。
29).recordHistory:
　　　　是否記錄歷史，默認爲true，能夠記錄頁面滾動的歷史，經過瀏覽器的前進後退來導航。注意若是設置了autoScrolling：false，那麼這個配置也將被關閉，即設置爲false。
30).showActiveTooltip：
　　　　是否顯示當前頁面的導航的tooltip信息，默認爲false
showActiveTooltip:"true"

31).scrollOverflow：
　　　　內容超過滿屏後是否顯示滾動條，默認爲false。若是設置爲true，則會顯示滾動條，若是要滾動查看內容，還須要jquery.slimscroll插件的配合。
32).slimscroll：
插件主要用於模擬傳統的瀏覽器滾動條。
33).sectionSelector：
　section的選擇器，默認爲.section。
34).slideSelector：
　　　　slide的選擇器，默認爲.slide。jquery

4.fullPage支持延遲加載圖片和視頻（Lazy Loading）

1.圖片：
<img daye-src="image.png">
2.視頻：
　<video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /> 　</video>css3

5.demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/jquery.fullPage.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<style>
     .slide{text-align: center;}
        #fp-nav ul li, .fp-slidesNav ul li {
            width: 90px;
            height: 21px;
            margin: 10px 0 0;
            vertical-align: middle;
        }
        #fp-nav ul li a, .fp-slidesNav ul li a {
            float: right;
            width: 21px;
            height: 21px;
            color: #8F9DA4;
            text-align: right;
        }
        #fp-nav ul li a span, .fp-slidesNav ul li a span{
            height: 12px;
            width: 12px;
            border:2px solid #fff;
            background: rgba(0, 0, 0, 0);
        }
        #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{
            width: 12px;
            height: 12px;
            margin: -2px 0 0 -2px;
        }
        #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{
             margin: -2px 0 0 -2px;
             background: #fff;
        }
        #fp-nav ul li .fp-tooltip.right{
            float: left;
            top: 5px;
            margin-right: 5px;
            font: 12px "Microsoft Yahei";
            line-height: 21px;
        }
        /*水平導航*/
        .fp-slidesNav ul li {
                   width: 14px;
                    height: 21px;
                    margin-left: 10px;
                    vertical-align: middle;
        }
</style>
</head>
<body>
<div id="fullpage">
    <div class="section">
        1
    </div>
    <div class="section">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
        <div class="slide">5</div>
        <div class="slide">6</div>
    </div>
    <div class="section">
        3
    </div>
    <div class="section">
        4
    </div>
    <div class="section">
        5
    </div>
    <div class="section">
        5
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#fullpage").fullpage({
            sectionsColor:['#ff7a8a', '#336699', '#993366','#336699','#46c8af','#EA6153'],
            navigation:true,
            navigationTooltips: ['首頁', '視覺', '交互', '皮膚', '功能', '待辦郵件'],
            navigationPosition:"right",
            controlArrows:false,
            slidesNavigation:true,
            slidesNavPosition:"bottom",
            showActiveTooltip:true,
            anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
        });
    });
</script> 
</body>
</html>

另外多說幾句，關於單頁中的圖片與文字的動畫效果
基本上就是一張背景圖+幾張圖片+文字
關鍵點：
進入可視區域時，標題部分字體縮放比例變化透明度變化，兩邊加載文字和圖片的方向不一樣
本文爲原創，轉載請註明地址，謝謝
本文地址：http://www.cnblogs.com/wanghuih/p/6520498.htmlweb

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。