検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >Bootstrap カルーセルと CSS3 アニメーションはとてもクールです。 _html/css_WEB-ITnose

Bootstrap カルーセルと CSS3 アニメーションはとてもクールです。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:31:381484ブラウズ

对于网站开发者来说，对展示内容增加一个滑动或者是轮播效果的是非常常见的需求。收费和免费的轮播插件多的是不胜枚举。其中很多提供很多有用的配置选项和动态效果。

很多时候，如果你的项目需要的是一个轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstrap，（一个最流行的开源前端框架）的话。你可以参考一下bootstrap官方组件。

这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果。同时确保这个js组件自由扩展和快速上手。

 

介绍Animate.css

为了让我自己写的动画效果值得称赞，我用一个非常有名的开源的CSS3动画库，被形象的称为animate.css。 Dan Eden写的。

这是让我能专注于手头的任务，而不是解释CSS3动画的代码。然而，如果你想深入的了解，你可以在SitePoint上Craig Buckler写的CSS3动画系列进一步学习。

 

用Animate.css 需要2个步骤：

  1. 在html文档中引入animate.min.css。
  2. 在网页中要加动画的元素上添加animated yourchosenanimation类。

接下来你用Animate.css网站上的看到的关于动画的类名，代替yourchosenanimation。

 

引入Bootstrap轮播组件

Bootstrap轮播组件有三个主要的部分。

  • 轮播指示显示幻灯的页面数量，给用户提供一个视觉线索，并提供可以滑动的导航。
  • 轮播条目，一个叫.carousel-inner的类，包含在外边框的里边。代表每一个独立的滑块。每个图片里边的都可以放置图片。也可以添加标题。还可以在html元素上添加carousel-caption类名。Bootstrap会有自带的样式。我们可以通过这些元素添加动画。
  • 最后，是轮播控制箭头，功能是可以使用户前后滑动。

    • 如果想了解更多Bootstrap轮播组件的详情，可以查看Syed Fazle Rahman的用Bootstrap3创建js轮播效果这篇文章。

    为了简单的展示demo，就先不加图片了。焦点先放在轮播框架上作为动画。

     

    构建HTML结构

    下边是你需要引用到你项目当中的：

  • jQuery
  • Bootstrap’s CSS and JavaScript
  • Animate.css
  • 一个样式表和js文档。

    • 为了加快开发进程，从Bootstrap官网引用了模板和必要的文件。

    下边是Bootstrap轮播代码：

    6.  

    11. This is the caption for slide 1

    14. This is the caption for slide 1
  •  

  • This is the caption for slide 2
  •  

  • This is the caption for slide 3
  •  
  • role="button" data-slide="prev">
  • Previous
  •  
  • role="button" data-slide="next">
  • Next
  •  

    • 上記のコードが正しい場合、ブラウザで開くと実行可能なカルーセルが表示されます。上記のコードには JavaScript の行が含まれていません。コード。画像を追加しない場合は、カルーセルが折りたたまれるのを防ぐために、CSS ドキュメントの .carousel .item クラス ブロックに min-height 値を追加するだけです。

    この特別なアニメーション ライブラリを値として使用して、カルーセル タイトル内の要素にアニメーション属性 data-animation を追加します。

    Animate.css ライブラリの他のアニメーションを体験したい場合は、data-animation 属性値を選択したアニメーション クラス名に置き換えます。

    JavaScript コードでは data-animation 属性値を使用します。

    単純な自動カルーセルが見つかる場合もありますが、この場合はより詳細な制御が可能です。

    この方向の最初のステップでは、コードを記述せずに要素から data-ride="carousel" 値を削除し、data-ride 属性値を初期化します。ただし、カルーセルの制御には js コードを使用する予定なので、この data-ride 属性は不要です。

    カルーセルに CSS スタイルを追加します

    次に、創造力を発揮して、好みに応じてカルーセル タイトルにスタイルを追加します。これから書くスタイル ルールは、スムーズに動作するデモです。

    より具体的には、アニメーション遅延プロパティの制御を追加します。各アニメーションをいつ開始するかを定義します (簡単なデモンストレーションのためにブラウザーの接頭辞が省略されていることに注意してください)

    .carousel-caption h3:first-child {

    anime-delivery: 1s;

    1. }
    3. 。 carousel-caption h3:nth-child(2) {
    4. アニメーション遅延: 2 秒;
    5. }
    7. .carousel-caption button {
    8. アニメーション遅延: 3 秒;
    9. }
    11. 上コード スニペットにより、要素のアニメーションが順序どおりに開始されることが保証されます。他の効果も実行できます。たとえば、最初の 2 つのタイトルを選択して、一緒に表示することができます。次にボタンボタンです。自分で決めて楽しむことができます。
    jQuery コードを書きます:

    このカルーセルを初期化し、このコードをカスタム JavaScript ファイルに追加しましょう:

    var $myCarousel = $('#carousel-example-generic') ;

    // Initialize carousel

      $myCarousel.carousel();
    3. 次に、このアニメーションを解決しましょう。
    最初のスライドのタイトルをアニメーション化するには、ページがブラウザに読み込まれた後にスクリプトを実行する必要があります。後続のスライドがアニメーション化されて表示され、コードが slide.bs.carousel イベントで実行されます。つまり、同じコードが 2 回実行されます。1 回目はページの読み込みで、もう 1 回目は slide.bs.carousel イベントです。 私たちは非重複の原則に従いたいため、コードを関数にカプセル化し、必要に応じて参照する予定です。

    コード:

    function doAnimations(elems) {

    var animEndEv = 'webkitAnimationEnd animeend';

      elems.each(function () {
      2. var $this = $(this),
      3. $アニmationType = $this.data('animation');
      4. // animate.css クラスを
    4. に追加します
      5. // アニメーション化する要素
      6. // animate.css クラスを削除します
      7. // アニメーション イベントが終了したら
      8. $this.addClass($animationType).one(animEndEv, function () {
      9. $this.removeClass($animationType);
      10. });
      11. });
      12. }
      13. // 要素を選択アニメーション化されます
      14. // ページ読み込み時の最初のスライド内
      15. var $firstAnimatingElems = $myCarousel.find('.item:first')
      16. .find('[data-animation ^= "animated"]') ;
      17. // 関数を使用してアニメーションを適用します
      18. doAnimations($firstAnimatingElems);
      19. // カルーセルを一時停止します
      20. $myCarousel.carousel('pause');
      22. // doAnimations() 関数をアタッチしますto the
      23. // カルーセルの slide.bs.carousel イベント
      24. $myCarousel.on('slide.bs.carousel', function (e) {
      25. // アクティブなスライド内でアニメーション化する要素を選択します
      26. var $ animatingElems = $(e.popularTarget)
      27. .find("[data-animation ^= 'animated']");
      28. doAnimations($animatingElems);
      29. });
    31. 上記をやってみましょうコードを分析します。
    doAnimations() 関数を見てみましょう

    この doAnimations() 関数によって実行されるタスクは次のとおりです。

    アニメーション終了イベント名を含む文字列を変数にキャッシュすることから始まります。ご想像のとおり、このイベントは各アニメーションがいつ終了するかを知らせます。各アニメーションが終了した後、animate.css クラスを削除するため、この情報が必要になります。これを削除しなかった場合、カルーセル タイトルは 1 回だけ、つまりカルーセルがその特定のスライドを初めて表示したときのみアニメーション化されます。

    1. var animEndEv = 'webkitAnimationEnd animeend';

    次に、関数はアニメーション化する各要素をループし、data-animation の属性値を取得します。前述したように、この値には、アニメーション化するために要素に追加する Animate.css クラスが含まれています。

    1. elems.each(function () {
    2. var $this = $(this),
    3. $animationType = $this.data('animation');
    4. // etc...
    5. } );

    最後に、この doAnimations() 関数は、アニメーション化する各要素に animate.css クラスを動的に追加し、アニメーションが終了すると、イベント リスナーもアタッチされます。アニメーションが終了したら、Animate.css から追加されたクラスを削除します。これにより、次のカルーセル スライドが現在の領域に確実に戻ります。 (このコードを削除して、何が起こるかを確認してください)

    1. $this.addClass($animationType).one(animEndEv, function () {
    2. $this.removeClass($animationType);
    3. });

    最初のタイトルのアニメーション

    ページがブラウザに読み込まれるときに最初のスライドでアニメーション化するもの:

    1. var $firstAnimationElems = $myCarousel .find('.item:first')
    2. .find("[data-animation ^= 'animated']");
    3. doAnimations($firstAnimatingElems);

    このコードでは、最初の値を見つけます。ライトシートの場合、値を取得します。 data-animation を使用して、アニメーションのタイトルからアニメーション プロパティを取得します。次に、変数 $firstAnimatingElems をパラメーターとして doAnimations() 関数に渡し、関数を実行します。

    カルーセルの停止機能

    最初のスライドコンテンツのアニメーションが完了したら、カルーセル機能を停止します。

    1. $myCarousel.carousel('pause');

    これは、常に回転することを防ぐための Bootstrap カルーセル コンポーネントの機能です。常に回転すると訪問者にとって迷惑になる可能性があります。

    この場合、すべてのアニメーションの実行が終了するまでカルーセルが次のスライドに直接ループしないようにすることをお勧めします。これは、初期化コードで「間隔」オプションを設定することで制御できます:

    1. $myCarousel.carousel({
    2. 間隔: 4000
    3. });

    私の意見では、無限ループカルーセルです。スワイプして表示するたびにタイトルがジャンプするのは理想的ではありません。

    カルーセル スライド タイトルのアニメーション

    各スライドのアニメーション化されたカルーセル タイトルを表示するには、以下で説明する手順が必要です。

    まず、slide.bs.carousel にイベント リスナーを追加します。

    このイベントは、スライド インスタンス メソッドが呼び出されるとすぐに発生します。

    1. $myCarousel.on('slide.bs.carousel', function (e) {
    2. // do things...
    3. });

    次に、現在のライトスライスを選択しますそしてアニメーション化したい要素を見つけます。以下のコードは、slide.bs.carousel イベントの .relativeTarget プロパティを使用してアニメーションをバインドします。

    1. var $animatingElems = $(e.popularTarget).find("[data-animation ^= 'animated']");

    最後に、doAnimations() 関数を呼び出して $animatingElems を処理しますas パラメータが渡されます。

    1. doAnimations($animatingElems);

    全体的なデモ:

    デモ

    結論:

    ご存知の方も多いかもしれませんが、カルーセルには開発者が考慮すべき点がいくつかあります。問題。

    この投稿では、数行の jQuery と animate.css ライブラリを使用して、基本的な Bootstrap カルーセル コンポーネントに追加の作業を追加する方法を示します。ただし、同様の CSS ライブラリは他にもあります。または css3 アニメーションでも同様に実行します。

    Bootstrap カルーセルのカスタム起動を追加する他の方法を提案していただけますか?皆様のご意見をお待ちしております。

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：CSS_html/css_WEB-ITnose で画像のグレーと元の色を切り替える方法次の記事：CSS_html/css_WEB-ITnose で画像のグレーと元の色を切り替える方法

    関連記事

    続きを見る