使用Swiper Animate製作啟動頁

標籤：

swiper是一個比較好的輪播滑動外掛程式，他的優點就不多說了，用過的都說好！親可以去官網親自測試。

前段時間做了一個滑動引導頁，需要有豐富的動畫效果，雖然都是手寫的效果，但是總覺得太麻煩，現在可以用swiper Animate來實現豐富的動畫效果。官網的講解也是非常簡單，這裡我自己做了個簡單的小例子。

效果：

開始製作：

準備圖片素材：

頁面引用相關的css和js檔案：

<link rel="stylesheet" href="js/swiper/swiper-3.3.0.min.css"><link rel="stylesheet" href="js/swiper/animate.min.css">

<script src="js/jquery-1.8.3.min.js"></script><script src="js/swiper/swiper-3.3.0.jquery.min.js"></script><script src="js/swiper/swiper.animate1.0.2.min.js"></script>

html主要代碼結構：

<div class="swiper-container">    <div class="swiper-wrapper">        <div class="swiper-slide">        <img src="img/plane.png"  class="plane ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.1s">        <img src="img/1.jpg" >        </div>        <div class="swiper-slide">        <img src="img/sun.png"  class="sun ani" swiper-animate-effect="rotateIn" swiper-animate-duration="3s" swiper-animate-delay="0.1s">        <img src="img/2.jpg" >        </div>    </div>    <!-- 分頁器 -->    <div class="swiper-pagination"></div></div>

在需要運動的元素上面增加類名  ani   ，和其他的類似外掛程式相同，Swiper Animate需要指定幾個參數：

swiper-animate-effect：轉場效果，例如 fadeInUp 
swiper-animate-duration：可選，動畫期間（單位秒），例如 0.5s
swiper-animate-delay：可選，動畫延遲時間（單位秒），例如 0.3s

簡單的樣式調整：

*{padding: 0;margin: 0;}.swiper-slide{width: 100%;position: relative;}.swiper-slide img{display: block;width: 100%;}.swiper-slide .plane{position: absolute;top: 20px;right: 20px;width: 33%;}.swiper-slide .sun{position: absolute;top: 10px;right: 10px;width: 30%;}

　　

配置js代碼：

<script>          var mySwiper = new Swiper (‘.swiper-container‘, {  pagination : ‘.swiper-pagination‘,  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit    swiperAnimateCache(swiper); //隱藏動畫元素     swiperAnimate(swiper); //初始化完成開始動畫  },   onSlideChangeEnd: function(swiper){     swiperAnimate(swiper); //每個slide切換結束時也運行當前slide動畫  }   })            </script>

這裡可以對swiper進行設定，比如切換方向，效果等等。你還可以去官網查看嘗試更多豐富的動畫效果。

 

使用Swiper Animate製作啟動頁