前言

现在H5广告已经是满天飞，各个公司的需求也是越来越大。特别是在微信里面推广的很多，目前也有很多在线制作的，但是都有各种尾巴，去掉也很麻烦。今天为大家推荐一款制作简单，同时自己定制源码，h5网站那个好没有任何尾巴。

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

1、首先准备PSD设计图，然后准备开始制作了。

2、Swiper 插件，swiper同时提供一个 Swiper Animate(下文用的是swiper3)

3、开始写代码了

框架

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

<!DOCTYPE html><html><head> <link rel="stylesheet" href="path/to/swiper.min.css"> <link rel="stylesheet" href="path/to/animate.min.css"></head><body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> <script src="path/to/swiper.min.js"></script> <script src="path/to/swiper.animate.min.js"></script></body></html>

设置样式

**(手机一屏一屏展示肯定都是100%)**

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

初始化

var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit swiperAnimateCache(swiper); //隐藏动画元素  swiperAnimate(swiper); //初始化完成开始动画 }, onSlideChangeEnd: function(swiper) { swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画 }})

添加动画

<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>

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

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