CSSで無限カルーセルアニメーションを実装する方法（コード例）-CSSチュートリアル-php.cn

CSSで無限カルーセルアニメーションを実装する方法（コード例）

青灯夜游

リリース： 2018-11-07 18:19:03

オリジナル

5732 人が閲覧しました

この記事の内容は、自動無限再生カルーセルアニメーション効果を実現する方法です。必要な方は参考にしていただければ幸いです。

前回の記事【cssで画像の回転表示効果を実現する方法】では、手動による無限カルーセル画像の制作について紹介しました。自動無限カルーセル画像アニメーションを作成します。アニメーション効果がどのように実現されるかを見てみましょう。

1. アニメーションのステージを設定します

HTML は前の記事の例と非常によく似ています。アニメーションが発生するステージ (#stage)、回転する div コンテナ、および一連の画像を用意します。

<div id="stage">
     <div id="rotator" style="-webkit-animation-name: rotator;">
          <a href="1.jpg"><img  src="1.jpg"    style="max-width:90%" alt="CSSで無限カルーセルアニメーションを実装する方法（コード例）" ></a>
          <a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="CSSで無限カルーセルアニメーションを実装する方法（コード例）" ></a>
          <a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="CSSで無限カルーセルアニメーションを実装する方法（コード例）" ></a>
          <a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="CSSで無限カルーセルアニメーションを実装する方法（コード例）" ></a>
          <a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="CSSで無限カルーセルアニメーションを実装する方法（コード例）" ></a>
          <a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="CSSで無限カルーセルアニメーションを実装する方法（コード例）" ></a>
          <a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="CSSで無限カルーセルアニメーションを実装する方法（コード例）" ></a>
          <a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="CSSで無限カルーセルアニメーションを実装する方法（コード例）" ></a>
     </div>
</div>

ログイン後にコピー

インラインスタイル属性は、次のアニメーション @keyframes を参照します。 JavaScript を使用してアニメーションを停止および再開できるように、CSS ではなくインラインである必要があります。

2. 3D 空間での写真の配置

CSS スタイルは複数の写真を配置するために使用され、最初に Y 軸を中心に回転させます (ページを垂直上向きに回転させます)。次に放射状に外側にパンします:

  #stage {
    margin: 2em auto 1em 50%;
    height: 140px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 50%;
  }
  #rotator a {
    position: absolute;
    left: -81px;
  }
  #rotator a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-backface-visibility: hidden;
  }
  #rotator a:nth-of-type(1) img {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
  }
  #rotator a:nth-of-type(2) img {
    -webkit-transform: rotateY(-60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(3) img {
    -webkit-transform: rotateY(-30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(4) img {
    -webkit-transform: translateZ(300px);
    background: #000;
  }
  #rotator a:nth-of-type(5) img {
    -webkit-transform: rotateY(30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(6) img {
    -webkit-transform: rotateY(60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(n+7) { display: none; }

ログイン後にコピー

写真設定 - 値 81px は、回転軸上の前向きの写真を中心とした左方向への移動を表します。距離は、画像の幅の半分 (140px/2) に LHS 画像のパディング (10px) と境界線 (1px) を加えたものです。

このステージでは 3 次元アニメーションを設定する必要があります。ステージはページの中央から開始するため、アニメーションを中央に配置するには、回転要素の下にあるアンカー要素を後方に移動する必要があります。

私たちは、左側に 3 枚、中央に 1 枚、右側に 2 枚の合計 6 枚の写真を準備し始めただけです。一番左の写真 (位置 1) は左から始まるため、最初の回転後にのみ表示されます。

写真が回転すると、写真が消え (表示: なし)、新しい写真が左側に添付され、位置 1 から回転できるようになります。 7 以上の写真は何枚でも使用できます。表示される位置に移動した場合にのみ表示されます。

Ajax を使用して、アニメーションの進行中に新しい写真を読み込むこともできます。

3. アニメーション効果を追加します

前に試したように、フォトホイールを 360 度回転させるのではなく、実際に行ったのは 30 度回転するだけでした (十分です)ある写真から次の写真に移動するには):

  @-webkit-keyframes rotator {
    from { -webkit-transform: rotateY(0deg);  }
    to   { -webkit-transform: rotateY(30deg); }
  }
  #rotator {
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1s;
  }
  #rotator:hover {
    -webkit-animation-play-state: paused;
  }

ログイン後にコピー

キーフレームを他のブラウザで機能させるには、すべてのスタイルをコピーし、以下のように -webkit- を -moz- と -ms- に置き換えます。サンプルコードブロックが表示されます。

アニメーションが完了すると、JavaScript イベントが発生します。これについては、次のセクションで説明します。イベントハンドラーは写真に沿って移動するため、アニメーションがリセットされると、写真は初期状態に戻るのではなく、円の周囲を 1 ステップ移動します。

何が起こっているのかをより明確に示すために、以下のデモでは中央の写真が強調表示されています。アニメーションが発生すると、ハイライトされたノードが回転し、開始位置にリセットされるのがわかりますが、写真は異なります。

4. JavaScript アニメーションコントローラーの追加

この例では、ホイールリセットで移動する写真を調整するために、アニメーションの終了を検出する JavaScript が必要です。これがなければ、ホイールは最初の 2 枚の写真を交互に表示するだけになります。

document.addEventListener("DOMContentLoaded", function() {
    var rotateComplete = function() {
      target.style.webkitAnimationName = "";
      target.insertBefore(arr[arr.length-1], arr[0]);
      setTimeout(function(el) {
        el.style.webkitAnimationName = "rotator";
      }, 0, target);
    };
    var target = document.getElementById("rotator");
    var arr = target.getElementsByTagName("a");
    target.addEventListener("webkitAnimationEnd", rotateComplete, false);
}, false);

ログイン後にコピー

すべての WebKit スタイルおよびその他のリファレンスには、Firefox (-moz- または Moz)、Opera (-o- または O)、さらには Internet Explorer (-ms- または ms) の代替手段があります。規格が決まるまでは、混乱に耐えなければならない。

この機能を Safari、Chrome、Firefox、Opera、および Internet Explorer 10 で使用するには、次の追加設定を含める必要があります:

  var rotateComplete = function() {
    with(target.style) {
      webkitAnimationName = MozAnimationName = msAnimationName = "";
    }
    target.insertBefore(arr[arr.length-1], arr[0]);
    setTimeout(function(el) {
      with(el.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "rotator";
      }
    }, 0, target);
  };
  var target = document.getElementById("rotator");
  var arr = target.getElementsByTagName("a");
  target.addEventListener("webkitAnimationEnd", rotateComplete, false);
  target.addEventListener("animationend", rotateComplete, false);
  target.addEventListener("MSAnimationEnd", rotateComplete, false);

ログイン後にコピー

setTimeout が必要な理由は不明です。遅延の設定は CSS で行われるため必要ありませんが、setTimeout がないと (0ms であっても) アニメーションを再トリガーできません。

5. エフェクト表示

CSSで無限カルーセルアニメーションを実装する方法（コード例）