基于swiper的移动端H5页面,丰富的动画效果

概述

通过运用swiper插件，制作移动端上下整屏滑动的H5页面，用来宣传或者简单注册等，可以嵌套H5音乐或者视频。

详细

代码下载：http://www.demodashi.com/demo/11942.html

目前对于H5方面有多个软件快餐，例如易企秀，人人秀等等，甚至连WPS都出了WPSH5。但是对于“高级程序工程师”来说，怎么会甘心只用鼠标傻瓜式的制作H5？

给大家介绍一款插件，有丰富的动画效果已经滚动效果，用于上下整屏滑动等纵向滚动十分简便，还可用于PC和移动端的轮播，左右滑动等横向滚动。

项目结构：需要引入swiper，zepto插件，其中swiper.animate是swiper的一部分，用于小模块的移入移出的动画效果。common.css是移动端的一个公共文件，定义html的font-size。

接下来给大家简单介绍介绍用法：

第一步：

1	`<meta` `name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">`

定义自适应宽度，禁止用户缩放，体验原生APP的效果。

引入文件：

<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="common.css">
 
 
<script src="zepto.js"></script>
<script src="swiper.min.js"></script>
<script src="swiper.animate.min.js"></script>

第二步：

给定盒子标签，swiper-slide即整屏的数目，对于滑动页面的数量，根据项目需要进行设置即可。

QQ图片20171115100524.png

第三步：

初始化，定义参数，可参考swiperAPI文档

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素 
            swiperAnimate(swiper); //初始化完成开始动画
          }, 
        onSlideChangeEnd: function(swiper){ 
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
          } 
    });

第四步：

运用swiper.animate的功能，给其中每个单页中的单个模块添加动画：

1	`<div` `style="visibility:visible;" class="div1 ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3"></div>`

只需在需要移入移出动画的标签中添加.ani类名，然后进行相应的动画类型，动画持续时间和延迟时间设置即可，十分简便。

效果中我只设置了一个小模块，大家可以自行设置多个模块，然后通过持续时间，延迟时间来控制先手顺序，再配上各种效果，想想都酷，对不对。

各类动画效果，具体可以参考动画效果

注意：每个整屏上的各个模块均采用绝对定位的方式进行布局，简单粗暴，移动端的单位注意更换为rem。

第五步：

背景音乐采用audio标签，通过播放暂停按钮进行模拟控制。

<div class="vi">
        <img src="zt.png" alt="">
        <audio id="aud" src="my.mp3" autoplay="autoplay">
            <!-- <source src="我的楼兰.mp3" type="audio/mp3">-->
            您的浏览器不支持audio标签
        </audio>
</div>

注意：最外面的盒子，要相对屏幕定位，同时设置z-index

.vi{
       position: fixed;
       width:30px;
       height:30px;
       font-size: 0;
       top: 30px;
       left: 50px;
       z-index: 1000;
   }