Move.js 是一個運動的javascript庫,它支持CSS3的動畫,不過不需要用CSS3代碼去編寫,只需要用javascript編寫就可以.
- 第一步,首先要引入這個庫,可以去cdnsjs哪里去引入cdn外鏈點擊去搜索Move.js
2.把它放到</body>的上面.可以可以下我放的位置.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>
Move.js的好處相對于原生如下
image.png
基本方法
回調(diào)動畫
下面是我的例子,其中afterLoad 與 onLeave 是 fullPage.js下函數(shù)的配置. 詳細可以見E盤下mx/個人宣傳頁-fullpage
afterLoad : function(anchorLink,index){
// console.log('anchorLink:'+anchorLink,'index:'+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(function(){
move('.section2 h1').scale(1.3).end();
});
move('.section2 p').set('margin-top','5%').end();
break;
case 3:
move('.section3 h1').scale(1.3).end();
move('.section3 h1').set('margin-left','auto').end();
move('.section3 p').set('margin-bottom','2%').end();
break;
case 4:
// move('.section4 img.primary1').rotate(360).end(function(){
// move('.section4 img.primary2').rotate(360).end(function(){
// move('.section4 img.primary3').rotate(360).end(function(){
// move('.section4 h4.primary11').scale(1.2).end(function(){
// move('.section4 h4.primary22').scale(1.2).end(function(){
// move('.section4 h4.primary33').scale(1.2).end();
// });
// });
// })
// });
// });
break;
default:
break;
}
},
onLeave : function (index,nextIndex,direction){
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();
move('.section2 h1').set('opacity','0.8').end();
move('.section2 p').set('margin-top','800px').end();
break;
case 3:
move('.section3 h1').scale(1).end();
move('.section3 h1').set('margin-left','-1500px').end();
move('.section3 p').set('margin-bottom','-1500px').end();
break;
case 4:
// move('.section4 img.primary1').rotate(-360).end();
// move('.section4 img.primary2').rotate(-360).end();
// move('.section4 img.primary3').rotate(-360).end();
// move('.section4 h4.primary11').scale(1).end();
// move('.section4 h4.primary22').scale(1).end();
// move('.section4 h4.primary33').scale(1).end();
break;
default:
break;
}
},
如果想了解更多請加我的qq 739367755
