首頁 >web前端 >js教程 >使用Swiper如何製作CSS3動畫效果

使用Swiper如何製作CSS3動畫效果

亚连原創: 2018-06-21 18:51:591517瀏覽

這篇文章主要為大家介紹了關於在Swiper內如何製作CSS3動畫效果的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

前言

Swiper 是一款免費以及輕量級的行動裝置觸控滑桿的框架，使用硬體加速過渡（如果該設備支援的話）。主要使用與行動端的網站、網頁應用程式（web apps），以及原生的應用程式（native apps）。主要是為IOS而設計的，同時，在Android、WP8系統以及現代桌面瀏覽器也有著良好的使用者體驗。

本文主要介紹了Swiper內製作CSS3動畫效果的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

1、在需要新增動畫的頁面裡面引入以下幾個檔案版本對應

<script src="../js/swiper.min.js"></script>
<script src="../js/swiper.animate.min.js"></script>
//**这里引入jquery或者zepto.js都可以**//
<script src="../js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="../css/animate.min.css" rel="external nofollow" >

2、接著在頁面js部分添加(按業務需求)

var mySwiper = new Swiper(&#39;.swiper-container&#39;,{
   autoplay : 5000,//自动切换时间
   pagination : &#39;.swiper-pagination&#39;,
   //pagination : &#39;#swiper-pagination1&#39;,
   onInit: function(swiper) {//轮播初始化时候执行动画
    swiperAnimateCache(swiper);
    swiperAnimate(swiper);
   },  
   onSlideChangeEnd: function(swiper) {//轮播切换到最后一张的时候重新执行
    swiperAnimate(swiper);
   }
  })

3 、在需要執行的動畫的元素上面加上class:

在需要執行動畫的元素上加上class ("ani"、"animated")

然後可以加入animate.css裡面提供的一些動畫

如果animate.css裡面的動畫不能滿足需求也可以自訂一些動畫

直接在執行動畫的元素對應的css裡面添加自訂的動畫樣式

也可以在元素上面配置幾個參數

swiper-animate-effect：切換效果，例如fadeInUp

swiper-animate-duration：可選，動畫持續時間（單位秒），例如0.5s

swiper-animate-delay：可選，動畫延遲時間（單位秒），例如0.3s

4、下面是案例