# **Swiper+Animate.css** ***** 這個是Swiper提供的視差過渡效果。需要配合Animate.css使用，同時，還必須添加swiper.animate.js 這個JS是對animate.css進行視覺差過渡的支持。 ## 使用方法 ### 1.引入樣式和js 在之前的基礎上引入animate.css即第一天學的animate.css # 再引入swiper.animate.min.js注意要放置 在swiper.min.js下面。 ``` <link rel="stylesheet" href="css/animate.min.css"> <script src="js/swiper.animate.min.js"></script> ``` 下載:[https://www.swiper.com.cn/usage/animate/index.html](https://www.swiper.com.cn/usage/animate/index.html) ### 2\. 初始化時隱藏元素并在需要的時刻開始動畫。 ``` //Swiper4.x var mySwiper = new Swiper ('.swiper-container', { on:{ init: function(){ swiperAnimateCache(this); //隱藏動畫元素 swiperAnimate(this); //初始化完成開始動畫 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每個slide切換結束時也運行當前slide動畫 //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 動畫只展現一次，去除ani類名 } } }) ``` ### 3.給需要添加視差效果的元素身上添加屬性 在需要運動的元素上面增加類名 **ani**, 然后添加swiper animate 參數： swiper-animate-effect：切換效果，例如 fadeInUp 即animate.css的效果名稱 swiper-animate-duration：動畫持續時間（單位秒），例如 0.5s # swiper-animate-delay: 延遲時間（單位秒） ``` <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">內容</p> </div> ``` :-:  ``` <div class="swiper-slide">//容器改成圖片一樣寬 <img src="images/1.jpg" width="1100" height="500" alt=""> <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一張</p> </div> <div class="swiper-slide"> <img src="images/2.jpg" alt=""> <p class="ani " swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一張</p> </div> <div class="swiper-slide"> <img src="images/3.jpg" alt=""> <p class="ani " swiper-animate-effect="flipInX" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一張</p> </div> <div class="swiper-slide"> <img src="images/4.jpg" alt=""> <p class="ani " swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一張</p> </div> <div class="swiper-slide"> <img src="images/5.jpg" alt=""> <p class="ani " swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一張</p> </div> <div class="swiper-slide"> <img src="images/6.jpg" alt=""> <p class="ani " swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一張</p> </div> ``` 動畫庫 [https://www.swiper.com.cn/usage/animate/index.html](https://www.swiper.com.cn/usage/animate/index.html)