現在很多官方網站都會采用全屏滾動的設計方式，全屏滾動加上簡單的描述就能營造出高端大氣的效果，實現全屏滾動的插件有很多，例如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部分

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

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

附： 注：本圖截取自http://blog.csdn.net/qianqianyixiao1/article/details/47148329文章