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

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

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

.

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

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter les boutons fléchés de commutation dans le plug-in swiper

Comment utiliser la prise du carrousel mobile swiper -in

Comment utiliser Bus dans la communication des composants Vue

Comment utiliser Swiper pour implémenter le carrousel d'images de page

dans Comment réaliser une augmentation numérique automatique en JavaScript

Comment utiliser Swiper pour réaliser l'utilisation du paginateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!