fullpage.js插件實現全屏滾動

2024-04-27 15:08:46

字體：大中小

來源：轉載

供稿：網友

現在很多官方網站都會采用全屏滾動的設計方式，全屏滾動加上簡單的描述就能營造出高端大氣的效果，實現全屏滾動的插件有很多，例如iscroll，fullpage等，今天著重學習一下fullpage.js插件參考文章：http://blog.csdn.net/qianqianyixiao1/article/details/47148329

一.fullpage.js介紹

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

二.fullpage.js兼容性

以下來自官網說明： fullPage.js 支持 IE8+ 及其他現代瀏覽器。

三.使用方法

1.首先下載相關插件： css部分：這里寫圖片描述

js部分：這里寫圖片描述

2.html部分

//注：每一個分頁面的class一定要包含section，否則fullpage.css無法識別樣式<div id="indexList"> <div class="section active"> <h1 id="page1_h1">第一屏</h1> </div> <div class="section"> <h1 id="page2_h1">第二屏</h1> </div> <div class="section"> <h1 id="page3_h1">第三屏</h1> </div> <div class="section"> <h1 id="page4_h1">第四屏</h1> </div></div>

3.實現頁面切換和動畫效果注：此處動畫采用animate.css處理

$(function(){ $("#indexList").fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'rgb(156, 206, 139)'], afterLoad:function(anchorLink, index){//index從1開始 if(index == 1){ $("#page1_h1").addClass("animated fadeInLeft"); } if(index == 2){ $("#page2_h1").addClass("animated bounce"); } if(index == 3){ $("#page3_h1").addClass("animated fadeIn"); } if(index == 4){ $("#page4_h1").addClass("animated fadeInLeft"); } }, onLeave:function(index, direction){ if(index == 1){ $("#page1_h1").addClass("animated fadeInLeft"); } } }); });

完整代碼如下：fullpage.js的demo

附：這里寫圖片描述注：本圖截取自http://blog.csdn.net/qianqianyixiao1/article/details/47148329文章