動(dòng)畫——move.js插件實(shí)現(xiàn)
move.js是一個(gè)極小的javascript庫昼榛，它支持css3的動(dòng)畫效果境肾，而且不需要寫css代碼，只需要簡單的js代碼就可以實(shí)現(xiàn)胆屿。move.js提供了創(chuàng)建css3動(dòng)畫的最簡單的javascript的API准夷。
fullpage.jpg
一、Move.js的方法
1莺掠、set()方法
用于設(shè)置元素的css屬性衫嵌，它帶有兩個(gè)參數(shù)：css屬性和屬性值。
2彻秆、scale()方法
用于放大或縮小元素的大小楔绞，按照提供的每一個(gè)值，將調(diào)用transform的scale方法唇兑。
3酒朵、rotate(deg)方法
通過提供的數(shù)值作為參數(shù)來旋轉(zhuǎn)元素。當(dāng)方法被調(diào)用的時(shí)候通過附加到元素的transform屬性上扎附。
4蔫耽、end()方法
用于move.js代碼片段的結(jié)束。它標(biāo)識(shí)動(dòng)畫的結(jié)束留夜。技術(shù)上該方法觸發(fā)動(dòng)畫的播放匙铡，該方法接受一個(gè)可選的callback回調(diào)函數(shù)。
二碍粥、小實(shí)例（Apple watch全屏展示）
效果圖如下：
第一頁.jpg
第二頁.jpg
第三頁.jpg
第四頁.jpg
示例代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>Apple Watch宣傳頁</title>
<link rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fullpage">
<div class="section section1">
<h1>它鳖眼，終于來了。嚼摩。钦讳。</h1>
<p>
為了充分發(fā)揮體積小以及佩戴手腕的優(yōu)勢(shì)矿瘦，Apple Watch帶來全新的科技和互動(dòng)方式。它可以讓你更快捷地完成一些早已習(xí)慣的事愿卒，也可以實(shí)現(xiàn)過去根本無法企及的新功能缚去。因此，這將會(huì)是煥然一新的全新體驗(yàn)琼开，也將實(shí)現(xiàn)與你前所未有的貼近病游。
</p>
<a href="#">進(jìn)一步了解</a>
</div>
<div class="section section2">
<h1>真正與你貼近的個(gè)人設(shè)備</h1>
<a href="#">進(jìn)一步了解</a>
</div>
<div class="section section3">
<h1>非同一般的精準(zhǔn)計(jì)時(shí)</h1>
<p>高級(jí)手表向來以精準(zhǔn)計(jì)時(shí)為本，Apple Watch更是如此稠通。它與你的iphone配合使用衬衬，同全球標(biāo)準(zhǔn)時(shí)間的誤差不超過50毫秒。而且改橘，你可以對(duì)表盤進(jìn)行個(gè)性化設(shè)定滋尉，以更具個(gè)性和意義的方式顯示時(shí)間，使其更貼近你的生活和日程需要飞主。</p>
<a href="#">進(jìn)一步了解</a>
</div>
<div class="section section4">
<h1>在三個(gè)特點(diǎn)鮮明的系列中找到你的風(fēng)格</h1>
<div class="row">
<div class="column">
<img src="img/primary_large_2x.jpg" class="primary">
<h4 class="primary"></h4>
<div class="intro">
<p>不銹鋼或者深空黑色不銹鋼表殼狮惜，藍(lán)寶石水晶鏡面，搭配多款時(shí)尚表帶碌识。</p>
<a href="#" class="more">了解更多</a>
</div>
</div>
<div class="column">
<img src="img/sport_large_2x.jpg" class="sport">
<h4 class="sport"></h4>
<div class="intro">
<p>銀色或者深空灰色的陽極氧化鋁金屬表殼碾篡，強(qiáng)化Ion-X玻璃，搭配亮麗柔韌的表帶筏餐。</p>
<a href="#" class="more">了解更多</a>
</div>
</div>
<div class="column">
<img src="img/edition_large_2x.jpg" class="edition">
<h4 class="edition"></h4>
<div class="intro">
<p>18K 黃金或者玫瑰金表殼开泽，藍(lán)寶石水晶鏡面，搭配精雕細(xì)琢的表帶及表扣魁瞪。</p>
<a href="#" class="more">了解更多</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<!--引入move.js的插件-->
<script src="https://cdn.bootcss.com/move.js/0.5.0/move.min.js"></script>
<!--激活fullpage效果-->
<script>
$(function(){
$('#fullpage').fullpage({
verticalCentered:false,
anchors:['page1','page2','page3','page4'],
navigation:true,
navigationTooltips:['它穆律，終于來了。导俘。峦耘。','真正與你貼近的個(gè)人設(shè)備','非同一般的精準(zhǔn)計(jì)時(shí)','在三個(gè)特點(diǎn)鮮明的系列中找到你的風(fēng)格'],
afterLoad:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1.5).end();
move('.section1 p').set('margin-top','5%').end();
break;
case 2:
move('.section2 h1').scale(0.7).end();
break;
case 3:
move('.section3 h1').set('margin-left','20%').end();
move('.section3 p').set('margin-left','20%').end();
break;
//三個(gè)圖片依次旋轉(zhuǎn)360度然后再標(biāo)志一次放大（回調(diào)函數(shù)嵌套）
case 4:
move('.section4 img.primary').rotate(360).end(function(){
move('.section4 img.sport').rotate(360).end(function(){
move('.section4 img.edition').rotate(360).end(function(){
move('.section4 h4.primary').scale(1.3).end(function(){
move('.section4 h4.sport').scale(1.3).end(function(){
move('.section4 h4.edition').scale(1.3).end();
});
});
});
});
});
break;
default:
break;
}
},
//在離開頁面時(shí)，頁面的動(dòng)畫效果還原.等再次滾動(dòng)頁面時(shí)就會(huì)出現(xiàn)動(dòng)畫
onLeave:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1).end();
move('.section1 p').set('margin-top','800px').end();
break;
case 2:
move('.section2 h1').scale(1).end();
break;
case 3:
move('.section3 h1').set('margin-left','-1500px').end();
move('.section3 p').set('margin-left','1500px').end();
break;
case 4:
move('.section4 img.primary').rotate(-360).end();
move('.section4 img.sport').rotate(-360).end();
move('.section4 img.edition').rotate(-360).end();
move('.section4 h4.primary').scale(1).end();
move('.section4 h4.sport').scale(1).end();
move('.section4 h4.edition').scale(1).end();
break;
default:
break;
}
},
});
});
</script>
</body>
</html>
