前言：
如今我們經常能見到全屏網站，尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內容，顯得格外的高端大氣上檔次。
在學習過jQuery插件之后，才發現之前的很多網站特效完全可以借助jQuery插件來實現，今天我們來嘗試使用move.js以及fullPage.js插件來制作一個“高端網站”。
網站效果展示如下：
fullPage.js 是一個基於 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網站，主要功能有：
- 支持鼠標滾動
- 支持前進后退和鍵盤控制
- 多個回調函數
- 支持手機、平板觸摸事件
- 支持 CSS3 動畫
- 支持窗口縮放
- 窗口縮放時自動調整
- 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等
Move.js是一款簡單小巧的模擬CSS3動畫的JS插件。它可以完成CSS3的各種動畫效果：移動、變形、傾斜、背景色漸變、旋轉等。並且可以在動畫中使用各種easing效果。
首先，我們再h5中寫出基本結構主體，代碼如下：
<body> <div id="fullpage"> <div class="section" id="section1"> <h1>fullpage-演示iphone5C官網</h1> <img src="img/iphone1.jpg" /> </div> <div class="section" id="section2"> <img src="img/iphone2.png" class="img2" /> <img src="img/iphone3.png" class="img3" /> <img src="img/iphone4.png" class="img4" /> <div class="description"> <h1>A powerful plugin</h1> <strong>fullPage.js</strong> <br /> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of. </div> </div> <div class="section" id="section3"> <img src="img/iphone-red.png" class="red" /> <img src="img/iphone-yellow.png" class="yellow" /> <img src="img/iphone-blue.png" class="blue" /> <div class="description"> <h2>Amazing stuff</h2> Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable. </div> </div> <div class="section" id="section4"> <div class="description"> <h2>Just a demo</h2> This is, of course, just a demo. I didn't want to spend much time on it. Don't expect it to work perfectly in all kind of screens. It has been designed to work on 1180px width or over on modern browsers with CSS3. </div> <img src="img/iphone-green.png" class="green" /> <img src="img/iphone-two.png" class="two" /> </div> </div> </body>
tips:
在fullPage中，class為section表示一個屏幕。
section不能執行包裹在body中，必須使用一個div包裹所有的section。
section中的每一個slide表示一個橫向幻燈片，可在當前屏中左右橫向切換。
在CSS樣式中，我們對各部分元素進行了定位和靜態的頁面布局設置，代碼如下：
*{ margin: 0px; padding: 0px; } #section1{ background-color: #F0F2F4; overflow: hidden; text-align: center; } #fullPage{ min-width: 1250px; } .section{ min-height: 650px; } #section1 h1{ font-size: 70px; text-align: center; margin: 60px 0px; } #section img{ width: 45%; } #section2{ position: relative; overflow: hidden; } #section2 .description{ width: 370px; position: absolute; top: 200px; right: 130px; color: #808080; font-size: 18px; line-height: 35px; } #section2 .description h1{ font-size: 36px; margin-bottom: 15px; } #section2 img{ height: 685px; position: absolute; transform: scale(0.6); top: -17px; } #section2 .img3{ z-index: 100; } #section3{ position: relative; overflow: hidden; } #section3 .description{ width: 500px; position: absolute; top: 200px; right: 130px; color: #808080; font-size: 18px; line-height: 35px; } #section3 .description h1{ font-size: 36px; margin-bottom: 15px; } #section3 img{ position: absolute; } #section3 .red{ left: 250px; top: 150px; } #section3 .yellow{ left: -40px; bottom: -400px; } #section3 .blue{ bottom: -400px; left: 550px; } #section4{ position: relative; } #section4 .green{ position: absolute; left:250px; top: 200px; } #section4 .description{ width: 90%; position: absolute; top: 100px; left: 5%; color: #808080; font-size: 14px; line-height: 25px; text-align: center; } #section4 .description h2{ font-size: 36px; margin-bottom: 15px; } #section4 .two{ position: absolute; bottom: -230px; left: 600px; }
接下來便是導入需要的JS文件：
需要注意的地方是：fullPage.js必須在JQuery.js文件之后導入!而move.js使用的是原生JS語言，故沒有要求。
在我們組建好網頁布局之后，必須先選中包裹所有section的div的ID,並調用fullPage()方法，才能加載布局。
調用fullPage()方法之后，可以給函數傳入對象類型的參數，設置fullPage的各種屬性。
<script type="text/javascript"> $(function() { $("#fullpage").fullpage({ navigation: true, verticalCentered: false, anchors: ["page1", "page2", "page3", "page4"], onLeave: function(index, nextIndex, direction) { switch(index) { case 2: move(".img2").x(0).duration(".7").delay(600).scale(0.8).end(); move(".img3").x(0).duration(".7").delay(600).scale(1).end() move(".img4").x(0).duration(".7").delay(600).scale(0.8).end() break; case 3: if(nextIndex!=4){ move(".red").y(0).duration("1").scale(1).end(); move(".yellow").y(0).duration("1").scale(0.8).end() move(".blue").y(0).duration("1").scale(0.8).end() break; } case 4: move(".green").y(0).duration("0.7").scale(1).end() move(".two").y(0).duration("0.7").scale(0.9).skewY(0).end() break; } switch(nextIndex) { case 2: move(".img2").x(-35).duration(".7").delay(700).scale(0.8).end(); move(".img3").x(300).duration(".7").delay(700).scale(1).end() move(".img4").x(700).duration(".7").delay(700).scale(0.8).end() break; case 3: move(".red").y(-400).duration("1.2").scale(1).end(); move(".yellow").y(-400).duration("1.2").scale(0.8).end() move(".blue").y(-400).duration("1.2").scale(0.8).end() move(".green").y(-400).duration("1.2").scale(1).end() move(".two").y(0).duration("0.7").scale(0.9).rotate(180).end() break; } } }); }); </script>
網站主題效果出來之后需要進行細致的調整，另外插件只是工具，提升自己能力的途徑是嘗試自己創作插件。