Comment créer des effets d'animation CSS3 à l'aide de Swiper-js tutoriel-php.cn

Comment créer des effets d'animation CSS3 à l'aide de Swiper

亚连

Libérer： 2018-06-21 18:51:59

original

1526 Les gens l'ont consulté

Cet article vous présente principalement les informations pertinentes sur la façon de créer des effets d'animation CSS3 dans Swiper. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. apprenez avec l’éditeur ci-dessous.

Préface

Swiper est un framework de curseur tactile gratuit et léger pour les appareils mobiles qui utilise des transitions accélérées par le matériel (si pris en charge par l'appareil ). Principalement utilisé avec les sites Web mobiles, les applications Web (applications Web) et les applications natives (applications natives). Il est principalement conçu pour IOS. En même temps, il offre également une bonne expérience utilisateur sur les systèmes Android, WP8 et les navigateurs de bureau modernes.

Cet article vous présente principalement le contenu pertinent sur la création d'effets d'animation CSS3 dans Swiper, et le partage pour votre référence et votre étude. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à l'introduction détaillée.

1. Introduisez les versions de fichiers suivantes dans la page où l'animation doit être ajoutée

<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" >

Copier après la connexion

2. Ajoutez ensuite la partie js de la page (selon les besoins de l'entreprise)

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

Copier après la connexion

3. Ajoutez une classe à l'élément qui doit être animé :

Ajoutez une classe ("ani", "animated") à l'élément qui doit être animé

Ensuite vous pouvez ajouter animate Certaines animations fournies en .css

Si les animations dans animate.css ne peuvent pas répondre à vos besoins, vous pouvez également personnaliser certaines animations

Ajouter des animations personnalisées directement dans le css correspondant à l'élément qui effectue le style d'animation

Vous pouvez également configurer plusieurs paramètres sur l'élément

swiper-animate-effect : effet de commutation, tel que fadeInUp

swiper-animate- durée : facultatif, durée de l'animation (en secondes), telle que 0,5 s

swiper-animate-delay : facultatif, temps de retard de l'animation (en secondes), tel que 0,3 s

4. Voici un cas