So erstellen Sie CSS3-Animationseffekte mit Swiper

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Erstellen von CSS3-Animationseffekten in Swiper ein. Es hat einen gewissen Referenz-Lernwert für alle, die es brauchen Lernen Sie mit dem untenstehenden Herausgeber.

Vorwort

Swiper ist ein kostenloses und leichtes Touch-Slider-Framework für mobile Geräte, das hardwarebeschleunigte Übergänge verwendet (sofern vom Gerät unterstützt). ). Wird hauptsächlich mit mobilen Websites, Webanwendungen (Web-Apps) und nativen Anwendungen (native Apps) verwendet. Es ist hauptsächlich für IOS konzipiert, bietet aber auch eine gute Benutzererfahrung auf Android-, WP8-Systemen und modernen Desktop-Browsern.

Dieser Artikel stellt Ihnen hauptsächlich den relevanten Inhalt zum Erstellen von CSS3-Animationseffekten in Swiper vor und teilt ihn als Referenz und zum Studium. Ich werde im Folgenden nicht viel sagen, werfen wir einen Blick auf die detaillierte Einführung.

1. Fügen Sie die folgenden Dateiversionen der Seite hinzu, auf der die Animation hinzugefügt werden muss

<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. Fügen Sie sie dann dem js-Teil der Seite hinzu (je nach Geschäftsanforderungen)

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 . Klasse hinzufügen:

zum Element, das animiert werden muss. Klasse hinzufügen ("ani", "animated")

zum Element, das animiert werden muss. Anschließend können Sie die in animate.css bereitgestellten Animationen hinzufügen

Wenn die Animationen in animate.css die Anforderungen nicht erfüllen, können Sie auch einige Animationen anpassen

Fügen Sie benutzerdefinierte Animationsstile direkt im CSS hinzu entsprechend dem Element, das die Animation ausführt

Sie können auch mehrere Parameter für das Element konfigurieren

Swiper-Animate-Effekt: Umschalteffekt, z. B. FadeInUp

Swiper-Animate -duration: optional, Animationsdauer (Einheit Sekunden), z. B. 0,5 s

swiper-animate-delay: optional, Animationsverzögerungszeit (in Sekunden), z. B. 0,3 s

4. Das Folgende ist ein Fall

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Umschaltpfeiltasten im Swiper-Plug-in

So verwenden Sie den Swiper-Mobilkarussell-Plugin -in

So verwenden Sie Bus in der Vue-Komponentenkommunikation

So verwenden Sie Swiper, um ein Seitenbildkarussell zu implementieren

in Wie man die automatische numerische Erhöhung in JavaScript realisiert

Wie man Swiper verwendet, um die Verwendung von Paginator zu realisieren

Das obige ist der detaillierte Inhalt vonSo erstellen Sie CSS3-Animationseffekte mit Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!