中秋节快到了打造属于H5动画页面

刚刚看了慕课的文章：http://www.imooc.com/learn/514
感觉fullPage.js插件并不是很理想，所以推荐另外一个插件swiper。

现在H5广告已经是满天飞，各个公司的需求也是越来越大。特别是在微信里面推广的很多，目前也有很多在线制作的，但是都有各种尾巴，去掉也很麻烦。今天为大家推荐一款制作简单，同时自己定制源码，没有任何尾巴。
1、首先准备PSD设计图，然后准备开始制作了。
2、Swiper 插件，swiper同时提供一个 Swiper Animate
3、开始写代码了

（1）、html框架，并引入需要的js、css

    
    



    
 
     Slide 1
     Slide 2
     Slide 3
 
 
 
 
 
 
 
 
    
    
    

（2）、设置样式(手机一屏一屏展示肯定都是100%)

.swiper-container {
    width: 600px;
    height: 300px;
}  

（3）、初始化

（4）、给元素添加动画

内容

注意：在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp 
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s    动画效果参考 [http://www.swiper.com.cn/usage/animate/index.html][1]

希望大家多多关注。