スワイパーを使用して CSS3 アニメーション効果を作成する方法

この記事は、Swiper で CSS3 アニメーション効果を作成する方法に関する関連情報を主に紹介しており、サンプル コードを通じて詳細に紹介されています。この記事は、すべての人の学習や仕事に役立ちます。以下に来て私と一緒に学びましょう。

はじめに

Swiper は、ハードウェア アクセラレーションによるトランジション (デバイスがサポートしている場合) を使用する、モバイル デバイス用の無料の軽量タッチ スライダー フレームワークです。主にモバイル Web サイト、Web アプリケーション (Web アプリ)、ネイティブ アプリケーション (ネイティブ アプリ) で使用されます。主に 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('.swiper-container',{
   autoplay : 5000,//自动切换时间
   pagination : '.swiper-pagination',
   //pagination : '#swiper-pagination1',
   onInit: function(swiper) {//轮播初始化时候执行动画
    swiperAnimateCache(swiper);
    swiperAnimate(swiper);
   },  
   onSlideChangeEnd: function(swiper) {//轮播切换到最后一张的时候重新执行
    swiperAnimate(swiper);
   }
  })

3. の要素にクラスを追加します。実行する必要があるアニメーション:

アニメーションする必要がある要素にクラス ("ani"、"animated") を追加します

次に、animate.css で提供されるいくつかのアニメーションを追加できます

animate のアニメーションの場合。 CSS がニーズを満たしていない場合は、アニメーションをカスタマイズすることもできます

アニメーションを実行する要素に対応する CSS にカスタム アニメーション スタイルを直接追加します

要素でいくつかのパラメータを設定することもできます

swiper-animate-effect:Switching fadeInUp などのエフェクト

swiper-animate-duration: オプション、アニメーション期間 (単位秒)、たとえば 0.5 秒

swiper-animate-lay: オプション、アニメーション遅延時間 (単位秒)、たとえば 0.3 秒

4. 以下は事例です

以上、皆様の参考になれば幸いです。

関連記事:

Swiper プラグインに切り替え矢印ボタンを実装する方法

Swiper モバイル カルーセル プラグインの使用方法

Vue コンポーネント通信での Bus の使用方法

Swiper Imageカルーセルを使ったページの実装方法

JavaScriptで自動数値増加を実現する方法

Swiperを使ってページネーションを実装する方法

以上がスワイパーを使用して CSS3 アニメーション効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。