目前對於H5方面有多個軟體快餐，例如易企秀，人人秀等等，甚至連WPS都出了WPSH5。但是對於“高階程式工程師”來說，怎麼會甘心只用滑鼠傻瓜式的製作H5？

給大家介紹一款外掛，有豐富的動畫效果已經滾動效果，用於上下整屏滑動等縱向滾動十分簡便，還可用於PC和移動端的輪播，左右滑動等橫向滾動。

專案結構：需要引入swiper，zepto外掛，其中swiper.animate是swiper的一部分，用於小模組的移入移出的動畫效果。common.css是移動端的一個公共檔案，定義html的font-size。

接下來給大家簡單介紹介紹用法：

第一步：

<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即整屏的數目，對於滑動頁面的數量，根據專案需要進行設定即可。

第三步：

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的功能，給其中每個單頁中的單個模組新增動畫：

<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;
    }

音樂的話有的手機系統不支援自動播放，大家可以通過touchstart等事件來模擬自動播放，只要使用者一碰螢幕就會播放，是不是很“賊”，^_^。

整體效果如下：

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權