ウェブサイト開発者にとって、ディスプレイコンテンツにスライドまたはカルーセル効果を追加することは非常に一般的なニーズです。非常に多くの有料および無料のカルーセルプラグインがあります。それらの多くは、多くの便利な構成オプションと動的効果を提供します。
多くの場合、プロジェクトに軽量のカルーセルが必要な場合、多くの機能は必要ありません。同時に、プロジェクトはブートストラップ（最も人気のあるオープンソースのフロントエンドフレームワーク）を使用することです。公式のブートストラップコンポーネントを参照できます。
この記事では、Bootstrap Carouselに興味深いアニメーション効果を追加する方法を示します。同時に、このJSコンポーネントが自由に拡張され、迅速に開始されるようにします。
Animate.cssの紹介
アニメーション効果を作るために、私は自分自身を賞賛に値すると書いたので、非常に有名なオープンソースCSS3アニメーションライブラリを使用しました。ダン・エデンによって書かれました。
これは、CSS3アニメーションを説明するのではなく、手元のタスクに集中できるコードです。
animate.cssを使用するには、2つのステップが必要です。
1。HTMLドキュメントにAnimate.min.cssを紹介します。
2.アニメーション化されたYourChosenAnimationクラスを要素に追加して、Webページでアニメーションになります。
次に、Animate.CSS Webサイトに表示されるアニメーションに関するクラス名を使用して、YourCosenAnimationを置き換えます。
ブートストラップカルーセルコンポーネントの導入
Bootstrap Carouselコンポーネントには3つの主要な部分があります。
---カルーセルは、スライドに表示されるページの数を示し、ユーザーに視覚的な手がかりを提供し、スライドナビゲーションを提供します。
---外側の境界に含まれる.Carousel-Innerと呼ばれるクラス、Carouselエントリ。各独立したスライダーを表します。写真は各写真に配置できます。タイトルを追加することもできます。 HTML要素にCarousel-Captionクラス名を追加することもできます。ブートストラップには独自のスタイルがあります。これらの要素を介してアニメーションを追加できます。
---最後に、カルーセル制御矢印があります。これは、ユーザーが前後にスライドできる機能です。
デモを簡単に表示するために、写真は追加されません。最初にアニメーションとしてカルーセルフレームに焦点を合わせます。
HTML構造の構築
プロジェクトに引用する必要があるものは次のとおりです。
jquery
BootstrapのCSSとJavaScript
animate.css
StyleSheetおよびJSドキュメント。
開発プロセスをスピードアップするために、テンプレートと必要なファイルがBootstrapの公式Webサイトから参照されます。
以下はブートストラップカルーセルコードです。
<div id = "carousel-example-generic" data-ride = "carousel"> <！ - indicators-> <ol> <li data-target = "＃carousel-example-generic" data-slide-to = "0"> </li> data-target = "＃carousel-example-generic" data-slide-to = "2"> </li> </ol> <！ - スライドのラッパー - > <div role = "listbox"> <！ - first slide - > <div> <div> <div> BounceInright ">これは、スライド1のキャプション1 </h3> <ボタンデータアニメーション=" Animated zoominup "> button </button> </div> </div> < BounceIndown "> BounceInup">これは、スライド2のキャプションです</h3> <ボタンデータアニメーション= "Animated zoominright"> button </button> </div> </div> <！ - /.item - > <！ - 3番目のスライド - > <div> <div> <h3データアニメーション= "アニメーションZoomleft </</</</</</< data-animation = "Animated Flipinx">これはスライド3のキャプション3 </h3> <ボタンData-animation = "Animated Lightspeedin"> Button </button </button> </div> </div> <！ - /.item - > </div> <！ - /.carousel-inner-> <！ data-slide = "prev"> <span aria-hidden = "true"> </span> <span>前</span> </a> <a href = "＃carousel-example-example" button = "data-slide ="> <span aria-hidden = "true"> </span> <span
上記のコードが間違っていない場合、ブラウザで開くときに実行できるカルーセルが表示されます。上記のすべてには、JavaScriptコードの行が含まれていません。画像を追加しない場合、
CSSドキュメントの.carousel .itemクラスブロックにmin-height valueを追加して、カルーセルの崩壊を防ぎます。
この特別なアニメーションライブラリを価値として使用して、カルーセルタイトル内の要素にアニメーション属性のデータアニメーションを追加します。
animate.cssライブラリの他のアニメーションを体験したい場合は、データアニメーションプロパティ値の代わりに、選択したアニメーションクラス名を使用してください。
JavaScriptコードでデータアニメーション属性値を使用します。
単純な自動カルーセルは場合によっては見つけることができますが、このケースをより多く制御できます。
この方向の最初のステップで、要素からデータライド= "Carousel"値を削除し、コードを記述せずにData-Ride属性値を初期化します。ただし、JSコードを使用してCarouselを制御する予定であるため、このデータライドプロパティは不要です。
カルーセルにCSSスタイルを追加します
今、あなたの創造性を使用して、あなたの好みに応じてカルーセルのタイトルにスタイルを追加します。私が書くスタイルルールは、スムーズに機能するデモです。
より具体的には、アニメーション遅延プロパティの制御を増やします。各アニメーションがいつ開始されるかを定義します（単純なデモンストレーションのために、ブラウザプレフィックスは省略されていることに注意してください）
.Carousel-Caption H3：First-Child {Animation-Delay：1S;}。Carousel-Caption H3：nth-Child（2）{Animation-Delay：2s;}。Carousel-Caption Button {Animation-Delay：3s;}上記のコードスニペットでは、要素アニメーションが整然と開始されることを確認してください。他の効果を実行できます。たとえば、最初の2つのタイトルを選択して同時に表示できます。次に、ボタンボタンがあります。あなたは自分で決めて楽しむことができます。
jqueryコードを書く：
このカルーセルの初期化を開始し、カスタムJavaScriptファイルにコードを追加します。
var $ mycarousel = $（ '＃carousel-example-generic'）; //初期化carousel $ mycarousel.carousel（）;
カルーセルを動的にセットアップしました。次に、このアニメーションを解決しましょう。
最初のスライドのタイトルをアニメーション化するには、ページがブラウザにロードされた後にスクリプトを実行する必要があります。その後のスライドショーは、アニメーションの下で私たちの視野に入り、コードはSlide.bs.carouselイベントで実行されます。同じコードが2回実行されることを意味します。ページは1回ロードされ、slide.bs.carouselイベントが1回ロードされます。
私たちは非反復の原則に従うことを好んでいるので、私たちは関数のコードをカプセル化し、必要に応じてそれらを参照するつもりです。
コード：
関数doanimations（elems）{var animendev = 'webkitanimationend animationend'; ELEMS.ECH（function（）{var $ this = $（this）、$ animationtype = $ this.data（ 'animation'）; // animate.cssクラスを// animate.cssクラスを削除する//アニメーションイベントが終了したら、$ this.addclass（$ animationtype）。 $ this.removeclass（$ animationType）; functiondoanimations（$ firstanimatingelems）; // Carousel $ mycarousel.carousel（ 'Pause'）; // doanimations（）関数を// Carousel's slide.bs.carousel event $ mycarousel.on（ 'slide.bs.carousel'、anigate（e）infact the slide（e）bir secle the slide（ 'slide.carousel.on（' slide.carousel.on）） $ AnimatingElems = $（e.relatedTarget）.find（ "[data-animation ^= 'Animated']"）;上記のコードを分析しましょう。
doanimations（）関数を見てください
このdoanimations（）関数によって実行されるタスクは次のとおりです。
これは、変数のアニメーションイベント名を含むキャッシュ文字列から始まります。このイベントは、各アニメーションがいつ終了するかを推測した可能性があることを示しています。各アニメーションが終了した後、animate.cssクラスを削除するため、この点には情報が必要です。削除を行わない場合、カルーセルのタイトルにはアニメーションが1回しかありません。つまり、最初のカルーセルに特定のスライドを表示するだけです。
var AnimationEndev = 'webkitanimationEnd AnimationEnd';
次に、関数が各要素をループし、アニメーションを使用し、データアニメーションのプロパティ値を取得する必要があります。上記のことを考えてください。この値には、Animate.cssクラスが含まれており、要素に追加してアニメーション効果があります。
ELEMS.ECH（function（）{var $ this = $（this）、$ animationType = $ this.data（ 'animation'）; // etc ...}）;最後に、doanimation（）関数は、animate.cssクラスの各要素に動的に追加され、アニメーションを実行します。アニメーションが終了すると、イベントリスニングも添付されます。アニメーションが終了した後、animate.cssから追加されたクラスを削除します。これにより、次のカルーセルが現在のエリアに戻ることが保証されます。 （このコードを削除して、何が起こるかを確認しようとします）
$ this.addclass（$ animationType）.One（animendev、function（）{$ this.removeclass（$ animationType）;}）;最初のタイトルアニメーション
ページがブラウザにロードされると、最初のスライドでコンテンツをアニメーション化します。
var $ firstanimatingelems = $ mycarousel.find（ '。item：first'）.find（ "[data-animation ^= 'animated']"）; doanimations（$ firstanimatingelems）;
このコードでは、最初のライトを見つけます。データアニメーションを使用して、アニメーションのタイトルからアニメーション属性の値を取得したいと考えています。次に、変数$ firstAnimatingElemsをパラメーターとしてdoanimations（）関数に渡し、関数を実行します。
カルーセル停止機能
最初の画面コンテンツが実行されたら、このカルーセル機能を停止します。
$ mycarousel.carousel（ 'Pause'）;
これは、ブートストラップカルーセルコンポーネントが一定の回転を防ぐ機能です。一定の回転は訪問者を不幸にするかもしれません。
この場合、すべてのアニメーションが実行されるまで、カルーセルが次のライトに直接ループしないようにすることをお勧めします。これは、初期化コードで「間隔」オプションを設定することで制御できます。
$ mycarousel.carousel（{interval：4000}）;私の意見では、スライドが見えるたびに無限のループカルーセルタイトルがジャンプするのは理想的ではありません。
カルーセルスライドタイトルアニメーション
以下の手順は、各スライドのアニメーション化されたカルーセルタイトルで表示されるために必要です。
まず、Slide.bs.carouselにイベントリスナーを追加します。
スライドインスタンスメソッドが呼び出されると、イベントはすぐに発生します。
$ mycarousel.on（ 'slide.bs.carousel'、function（e）{// do stuff ...}）;次に、現在のライトを選択し、アニメーションを追加する要素を見つけます。次のコードでは、slide.bs.carouselイベントの.relatedTargetプロパティを使用して、アニメーションをバインドします。
var $ animatingElems = $（e.relatedTarget）.find（ "[data-animation ^= 'Animated']"）;
最後に、doanimations（）関数を呼び出し、パラメーターとして$ animatingElemsを渡します。
doanimations（$ aminatingelems）;
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
素晴らしいトピックの共有：jQueryの写真カルーセルjavascript写真カルーセルブートストラップ写真カルーセル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。