FullPage.js自学笔记（完）

动画——move.js插件实现

move.js是一个极小的javascript库，它支持css3的动画效果，而且不需要写css代码，只需要简单的js代码就可以实现。move.js提供了创建css3动画的最简单的javascript的API。

fullpage.jpg

一、Move.js的方法

1、set()方法

用于设置元素的css属性，它带有两个参数：css属性和属性值。

2、scale()方法

用于放大或缩小元素的大小，按照提供的每一个值，将调用transform的scale方法。

3、rotate(deg)方法

通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的transform属性上。

4、end()方法

用于move.js代码片段的结束。它标识动画的结束。技术上该方法触发动画的播放，该方法接受一个可选的callback回调函数。

二、小实例（Apple watch全屏展示）

效果图如下：

第一页.jpg

第二页.jpg

第三页.jpg

第四页.jpg

示例代码如下：

 
 
 
 
 




 

   
它，终于来了。。。
   

     为了充分发挥体积小以及佩戴手腕的优势，Apple Watch带来全新的科技和互动方式。它可以让你更快捷地完成一些早已习惯的事，也可以实现过去根本无法企及的新功能。因此，这将会是焕然一新的全新体验，也将实现与你前所未有的贴近。
   
   进一步了解
  

 

   
真正与你贴近的个人设备
   进一步了解
 

 

   
非同一般的精准计时
   
高级手表向来以精准计时为本，Apple Watch更是如此。它与你的iphone配合使用，同全球标准时间的误差不超过50毫秒。而且，你可以对表盘进行个性化设定，以更具个性和意义的方式显示时间，使其更贴近你的生活和日程需要。
   进一步了解
 

 

   
在三个特点鲜明的系列中找到你的风格
   


     

       
       

       

         
不锈钢或者深空黑色不锈钢表壳，蓝宝石水晶镜面，搭配多款时尚表带。
         了解更多
       
     

     

       
       

       

         
银色或者深空灰色的阳极氧化铝金属表壳，强化Ion-X玻璃，搭配亮丽柔韧的表带。
         了解更多
       
     

      

       
       

       

         
18K 黄金或者玫瑰金表壳，蓝宝石水晶镜面，搭配精雕细琢的表带及表扣。
         了解更多
       
      
   
 

学习是一件很快乐的事，这种快乐来自于你的思考。完成一项学习任务固然重要，但更重要的是在完成的过程中学到了什么，掌握了什么，遇到一些什么问题，为什么会出现这种问题，根源是什么，都有哪些解决方案，什么样的情况适合这个方案。只有在不断的思考，你的能力才会有所提升！