CSS無限および円形回転画像スライダー-CSSチュートリアル-php.cn

CSS Infinite and Circular Rotating Image Slider

画像スライダー（カルーセルとも呼ばれます）はどこでも入手できます。写真が左から右にスライドする（またはその逆）、一般的なスライダーを作成するための多くのCSSトリックがあります。多くのJavaScriptライブラリも、複雑なアニメーションを備えた美しいスライダーを作成します。この記事では、これらのことは何もしません。

一連の記事を通して、いくつかの派手で珍しい純粋なCSSスライダーを探ります。同じクラシックスライダーを見るのにうんざりしているなら、あなたは正しい場所にいます！

CSSスライダーシリーズ

サイクル回転ピクチャースライダー（現在の位置）
ポラロイドの写真を閲覧します
無限3Dスライダー

最初の投稿では、「ループ回転画像スライダー」と呼ばれるものから始めます：

かっこいいですよね？コードを分析しましょう！

html構造

美しい写真の装飾やCSSグリッドとカスタムシェイプに関する私のシリーズに従った場合、私の最初のルールはできるだけ少ないHTMLを使用することであることがわかります。私は常にCSSソリューションを見つけるのに苦労し、その後、多くの<div>などでコードを台無しにします。ここにも同じルールが適用されます - 私たちのコードは、コンテナ内の一連の画像にすぎません。 <p> 4つの写真を使用していると仮定します：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div> <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""> </div></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>それだけです！それでは、コードの興味深い部分に入りましょう。しかし、最初に、スライダーがどのように機能するかの論理を理解するために掘り下げます。 </p> <h3>稼働方法は？ </h3> これはビデオであり、そこから画像がどのように動くかをよりよく理解できるように<p> cssを削除しました：（ここにビデオを埋め込む必要がありますが、ビデオを処理できないので、テキストで説明します）ビデオは4つの画像を大きな円の上で反時計回りに回転させます。すべての画像は同じサイズです（図のSで表されます）。すべての画像の中心と交差し、半径（R）を持つ円である青い円に注意してください。後でアニメーションにこの値が必要になります。 rは0.707 * S.に等しい（方程式を考慮して、幾何学的な計算をスキップします。）<code>overflow: hidden

いくつかのCSSを書きましょう！

CSSグリッドを使用して、すべての画像を互いに同じ領域に配置します。

これまでのところ、複雑すぎるものはありません。トリッキーな部分はアニメーションです。

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

ログイン後にコピー

大きな円の回転について議論しましたが、実際には、各画像を個別に回転させて、大きな回転円の錯覚を作成します。それでは、アニメーションを定義し、画像要素に適用しましょう。

主なトリックは、行を強調表示することです。デフォルトでは、CSS mプロパティはセンター（または50％50％）に等しく、画像が中心を回転しますが、そうする必要はありません。画像が含まれている

大きな円の中心を回転させるために画像が必要です。

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

ログイン後にコピー

Rは0.707 * sに等しいため、

sは、rが画像サイズの70.7％に等しいと言えます。 120.7％の値を取得する方法を説明するグラフは次のとおりです。（画像はここに埋め込む必要がありますが、画像を処理できないため、テキストで説明します）画像は、変換オリジン値を計算する幾何学的関係を示しています。

アニメーションを実行して、何が起こるかを見てみましょう：（アニメーション効果はここに埋め込む必要がありますが、アニメーションを処理できないので、テキストで説明します）アニメーション効果は、すべての画像が一緒に重ねられているため、1つの画像のみが表示されることを示しています。

この重複を避けるために、各画像のアニメーションを遅らせる必要があります。

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

ログイン後にコピー

状況が改善されました！

コンテナのオーバーフローを非表示にすると、スライダーが既に表示されますが、各画像が移動する前に短時間見えるようにアニメーションをわずかに更新します。

これを行うためにアニメーションキーフレームを更新します：

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

ログイン後にコピー

90DEG（360DEG/4、ここで4は画像の数）ごとに

>少量の一時停止を追加します。次の画像にスライドする前に、各画像は可視期間の総持続時間（27％-22％、52％-47％など）の5％のままです。アニメーションをより美しくするためにcubic-bezier()関数を使用して更新します：（アニメーション効果をここに埋め込む必要がありますが、アニメーションを処理できないので、省略します）animation-timing-function今、私たちのスライダーは完璧です！まあ、ほぼ完璧です。なぜなら、私たちはまだ最終的なタッチアップを逃しているからです。私たちのイメージの周りを回転するカラフルな丸い境界線です。ラッパーで擬似要素を使用して作成できます：

.gallery背景として繰り返される円錐形の勾配を備えた円を作成し、塗りつぶし領域のみを表示するマスキングトリックを使用しました。次に、画像に定義された同じアニメーションを適用します。（アニメーション効果はここに埋め込む必要がありますが、アニメーションを処理できないため、省略します）

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

ログイン後にコピー

完了です！クールなループスライダーがあります：

さらに画像を追加しましょう

4つの画像を使用するのは良いことですが、任意の数の画像に拡張できる場合はさらに優れています。結局のところ、これは画像スライダーの目的です。 n写真を考慮することができるはずです。

これを行うために、SASSを導入することにより、コードをより一般的にします。まず、画像数（$ n）の変数を定義し、ハードコーディングされた画像数（4）の各部分を更新します。

遅延から始めましょう：

遅延の式は（1- $ i）*duration/$ nです。これは、次のSASSループを提供します。

本当に必要な場合は、持続時間を変数にすることもできます。しかし、アニメーションを維持しましょう：

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

ログイン後にコピー

パターンをよりよく表示するように簡素化しましょう：

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

ログイン後にコピー

各状態間のステップサイズは、25％、つまり100％/4に等しい - -360DEG/4の-90DEG角度を追加します。これは、このようなループを書くことができることを意味します：

.gallery {
  padding: calc(var(--s) / 20); /* 此处需要填充 */
  position: relative;
}

.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* 继承相同的填充 */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.gallery::after,
.gallery > img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

ログイン後にコピー

各画像はアニメーションの5％を占めているため、これを変更します。

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

ログイン後にコピー

…そしてこれ：

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

ログイン後にコピー

この例で選択した値は5％であることに注意する必要があります。また、各画像が表示されたままである時間を制御するための変数として設定することもできます。簡単にするためにこれをスキップしますが、宿題としてこれを試して、コメントで実装を共有できます！

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

ログイン後にコピー

最後のポイントは、transform-originを更新することです。幾何学的なスキルが必要です。構成は、画像の数に関係なく常に同じです。画像（小さな円）を大きな円の中に配置し、半径Rの値を見つける必要があります。

退屈な幾何学的な説明が必要ないかもしれないので、ここでr：

を見つける方法は次のとおりです。

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

ログイン後にコピー

これをパーセンテージとして表現すれば、次のようになります。

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

ログイン後にコピー

…これは、

値が等しいことを意味します transform-origin

完了です！任意の数の画像用のスライダーがあります！

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

ログイン後にコピー

そこに9枚の写真を追加しましょう：（ 9枚の写真のスライダー効果をここに埋め込む必要がありますが、写真やアニメーションを処理できないので、省略します）

同じ数の画像を追加し、画像の合計数で$ n変数を更新します。

要約