1. 程式人生 > >Swiper Animate動畫

Swiper Animate動畫

uid ... guid web htm 循環 animate 開始 guide

引入CSS文件:swiper.min.css、animate.min.css

JS文件:swiper.min.js、swiper.animate.min.js、jquery.min.js

步驟:

1. 使用Swiper Animate需要先加載swiper.animate.min.js和animate.min.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> ... <script src="path/to/swiper.min.js"></script> <script src="path/to/swiper.animate.min.js"></script> </body> </html>


2、添加JS代碼:初始化時隱藏元素並在需要的時刻開始動畫。

技術分享圖片
 swiperAnimateCache(swiper); //隱藏動畫元素 
 swiperAnimate(swiper); //初始化完成開始動畫         這兩個函數在swiper.animate.min.js文件中定義

3. 在需要運動的元素上面增加類名 ani ,和其他的類似插件相同,Swiper Animate需要指定幾個參數:
swiper-animate-effect:切換效果,例如 fadeInUp
swiper-animate-duration:可選,動畫持續時間(單位秒),例如 0.5s
swiper-animate-delay:可選,動畫延遲時間(單位秒),例如 0.3s

swiper.animate.min.js中貌似沒有設置動畫循環次數的屬性,可自行在swiperAnimate(a){}函數中添加,代碼如下:

//自己加的兩行(循環次數)
iterationCount = b[i].attributes["swiper-animate-iteration-count"] ? b[i].attributes["swiper-animate-iteration-count"].value : "",
iterationCount && (style = style + "animation-iteration-count:" + iterationCount + "; -webkit-animation-iteration-count:" + iterationCount + ";"),


最後在需要運動的元素上添加代碼:

<div class="enter ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2.5s" swiper-animate-timing-function="ease" >
  <img src="img/guide-enter.png" class=‘ani‘ swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="1.0s" swiper-animate-timing-function="ease-in-out" swiper-animate-iteration-count=‘infinite‘/>
</div>

 

Swiper Animate動畫