JS运动框架-Move.js

Move.js 是一个运动的javascript库,它支持CSS3的动画,不过不需要用CSS3代码去编写,只需要用javascript编写就可以.

1. 第一步,首先要引入这个库,可以去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 基本方法 回调动画

下面是我的例子,其中afterLoad 与 onLeave 是 fullPage.js下函数的配置. 详细可以见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