前の投稿では、円形の方向に回転する非常にクールな小さなスライダー（または、「カルーセル」と呼ぶ）を作成しました。今回は、ポラロイド畫像スタックをめくることができるスライダーを作成します。

かっこいいですよね？説明すべきことがたくさんあるので、最初にコードを見ないでください。參加しますか？

CSSスライダーシリーズ

• 円形回転式畫像スライダー
• Polaroid Picture Page Turn（あなたは今?。o限3Dスライダー
基本設定

このスライダーのHTMLとCSSのほとんどは、前回作成した円形スライダーに似ています。実際、まったく同じマーカーを使用しています。

これは基本的なCSSであり、親のコンテナをグリッドとして設定し、すべての畫像が互いに積み重ねられています。

これまでのところ、複雑なものはありません。ポラロイドスタイルの畫像でさえ、私は境界と影のみを使用しています。あなたはもっとうまくやれるかもしれないので、これらの裝飾スタイルを自由に試してみてください！エネルギーのほとんどをアニメーションに入れます。これは最も難しい部分です。

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

トリックは何ですか？ .gallery このスライダーのロジックは、畫像のスタッキング順序に依存します - はい、

を使用します。すべての畫像は、同じ

<code>.gallery  {
  display: grid;
  width: 220px; /* 控制大小 */
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
}</code>

値（2）から始まり、スタック內の最後の畫像が上部に配置されます。

最後の畫像を取り、スタック內の次の畫像が表示されるまで右にスライドします。次に、畫像の

値を下げて、デッキに戻します。その

値は他の畫像よりも低いため、スタック內の最後の畫像になります。

z-indexこれは、このトリックを示す単純化されたデモです。畫像の上にホバリングして、アニメーションをアクティブにします：z-index

さて、すべての畫像に同じトリックが適用されることを想像してください。畫像を區(qū)別するために

pseudoセレクターを使用する場合、これがパターンです。 z-index z-index最後の畫像（n）をスライドさせます。次の畫像が表示されます（n -1）。

次の畫像（n -1）をスライドさせます。次の畫像が表示されます（n -2）

次の畫像（n -2）をスライドさせます。次の畫像が表示されます（n -3）:nth-child()

（最初の畫像に到達するまで同じプロセスを続行します）

• 最初の畫像をスライドさせます（1）。最後の畫像（n）が再び表示されます。
これは私たちの無限のスライダーです！
解剖學アニメーション
前の投稿を覚えている場合、1つのアニメーションのみを定義し、各畫像を制御するために遅延を使用しました。ここでも同じことをします。まず、アニメーションのタイムラインを視覚化してみましょう。 3つの畫像から始めて、それらを任意の數（n）畫像に一般化します。

• アニメーションは、「右スワイプ」、「スワイプ左」、「移動しない」という3つの部分に分かれています。各畫像間の遅延を簡単に識別できます。最初の畫像が0Sで始まり、持続時間が6秒に等しいと思われる場合、2番目の畫像は-2秒で開始され、3番目の畫像は-4Sで始まります。

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

  また、「移動」部分がアニメーション全體の3分の2を占める（2*100％/3）、「スワイプ右」と「左スワイプ」パーツが3分の1を占めることがわかります。
  次のようなアニメーションキーフレームを書くことができます：

  <code>.gallery  {
    display: grid;
    width: 220px; /* 控制大小 */
  }
  .gallery > img {
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 10px solid #f2f2f2;
    box-shadow: 0 0 4px #0007;
  }</code>

  120％は任意の価値です。 100％を超える値が必要です。畫像は、殘りの畫像からすぐにスライドする必要があります。これを行うには、サイズの少なくとも100％を移動する必要があります。そのため、私は120％を選びました - 余分なスペースを確保します。
  ここで、

  を考慮する必要があります。忘れないでください、畫像がスタックから滑り出され、スタックの下部に戻る前に畫像のz-indexを更新する必要があります。 タイムラインで16.67％（100％/6）ポイントで狀態(tài)を定義する代わりに、畫像をデッキに戻す前に値を下げる前に、ほぼ同じポイント（16.66％および16.67％）で2つの狀態(tài)を定義します。 z-index

  これは、これらすべてをまとめたときに起こることです。

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

  まあ、スライド部分は正常に動作しているようですが、スタッキング順序はすべて臺無しにされています！上部の畫像が背面に移動しているため、アニメーションはうまく始まります...しかし、後続の畫像は維持されません。気付いた場合、シーケンス內の2番目の畫像は、次の畫像が上部に點滅する前に、スタックの上部に戻ります。

  z-index

  の変化を慎重に追跡する必要があります。最初に、すべての畫像には

  ：2があります。これは、スタッキング順序が...

  でなければならないことを意味します
  3番目の畫像をスライドさせて、

  に更新します。 z-index z-index 2番目の畫像でも同じことをします：

  <code>@keyframes slide {
    0%     { transform: translateX(0%); }
    16.67% { transform: translateX(120%); }
    33.34% { transform: translateX(0%); }
    100%   { transform: translateX(0%); } 
  }</code>

  …そして最初の畫像：z-index

  <code>@keyframes slide {
    0%     { transform: translateX(0%);   z-index: 2; }
    16.66% { transform: translateX(120%); z-index: 2; }
    16.67% { transform: translateX(120%); z-index: 1; } /* 我們在這里更新 z-order */
    33.34% { transform: translateX(0%);   z-index: 1; }
    100%   { transform: translateX(0% );  z-index: 1; }  
  }</code>

  私たちはこれを行いました、そして、すべてが大丈夫だと思われました。しかし、実際には、そうではありません！最初の畫像が後ろに移動すると、3番目の畫像が別の反復を開始します。つまり、

  ：2：

  に戻ります。

  <code>我們的眼睛 ? --> 第三張 (2) | 第二張 (2) | 第一張 (2)</code>

  だから、実際にはすべての畫像がまったくありません：2！畫像が移動されない場合（つまり、アニメーションの「モバイル」部分）。 3番目の畫像をスライドさせて、その

  値を2から1に更新すると、トップのままになります！すべての畫像が同じ

  <code>我們的眼睛 ? --> 第二張 (2) | 第一張 (2) | 第三張 (1)</code>

  を持っている場合、ソース順序の最後の畫像（この場合は3番目の畫像）がスタックの上部にあります。 3番目の畫像をスライドすると、次の結果が得られます。

  z-index 3番目の畫像はまだ上にあり、その後、アニメーションが

  ：2で再起動すると、2番目の畫像を上部に移動します。

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

  スライドすると、

  になります

  <code>.gallery  {
    display: grid;
    width: 220px; /* 控制大小 */
  }
  .gallery > img {
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 10px solid #f2f2f2;
    box-shadow: 0 0 4px #0007;
  }</code>

  最初の畫像は上部にジャンプします：

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

  わかりました、私は迷子です。それで、すべての論理が間違っていますか？

  私は知っている、それは混亂している。しかし、私たちの論理は完全に間違っていません。アニメーションを少し修正して、すべてが私たちが望むように機能するようにする必要があります。秘trickは、z-indexを正しくリセットすることです。

  3番目の畫像が上にある場合を考えてみましょう：

  <code>@keyframes slide {
    0%     { transform: translateX(0%); }
    16.67% { transform: translateX(120%); }
    33.34% { transform: translateX(0%); }
    100%   { transform: translateX(0%); } 
  }</code>

  3番目の畫像をスライドさせ、それを変更するとz-indexがそれを上に保ちます。私たちがする必要があるのは、2番目の畫像のz-indexを更新することです。そのため、デッキから3番目の畫像をスライドさせる前に、2番目の畫像z-indexを2に更新します。

  言い換えれば、アニメーションが終了する前に2番目の畫像のz-indexをリセットします。

  緑色の標識とは、z-index>を2に増やすことを意味し、赤いマイナスサインはz-index：1に関連しています。 2番目の畫像はz-index：2で始まり、デッキからスライドすると1に更新します。しかし、最初の畫像がデッキからスライドする前に、2番目の畫像のz-indexを2に戻します。これにより、両方の畫像が同じz-indexになることが保証されますが、DOMの後半に表示されるため、3番目の畫像はまだ上にあります。ただし、3番目の畫像がスライドして更新された後、z-indexになります。下に移動します。

  これはアニメーションの3分の2ですので、それに応じてキーフレームを更新しましょう。

  <code>@keyframes slide {
    0%     { transform: translateX(0%);   z-index: 2; }
    16.66% { transform: translateX(120%); z-index: 2; }
    16.67% { transform: translateX(120%); z-index: 1; } /* 我們在這里更新 z-order */
    33.34% { transform: translateX(0%);   z-index: 1; }
    100%   { transform: translateX(0% );  z-index: 1; }  
  }</code>

  もう少し良いですが、それでも十分ではありません。別の質問があります...
  ああ、いや、これは決して終わらないでしょう！
  心配しないでください。この問題は最後の畫像が関係している場合にのみ発生するため、キーフレームは再び変更しません。問題を修正するために、最後の畫像の「特別な」キーフレームアニメーションを作成できます。
  最初の畫像が上にある場合、次の狀況があります。
  最初の畫像が上部にジャンプする前に行った調整を考慮します。これは、この場合にのみ発生します。最初の畫像の後に移動する次の畫像は、DOMの高次

  <code>我們的眼睛 ? --> 第三張 (2) | 第二張 (2) | 第一張 (2)</code>

  最後の

  畫像です。殘りの畫像は、n、n -1、次に3から2に、2から1に移動しますが、1からNに移動します。 これを避けるために、最後の畫像に次のキーフレームを使用します。

  アニメーションが5/6（3分の2ではなく）になったときに

  値をリセットし、最初の畫像がスタックから移動されました。だから、ジャンプは見えません！

  <code>我們的眼睛 ? --> 第二張 (2) | 第一張 (2) | 第三張 (1)</code>

  成功！ Infinity Sliderが完璧になりました！これは、最終コードのすべてです：

  z-index

  任意の數の畫像をサポートします
  アニメーションは3つの畫像で動作します。任意の數字（n）畫像で機能させましょう。しかし、最初に、アニメーションを分割して冗長性を避けることで、作業(yè)をわずかに最適化できます。

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

  コードの読みやメンテナンスが簡単です！スライディングセクションの1つのアニメーションと、z-indexアップデート用の別のアニメーションを作成します。アニメーションでz-indexを使用していることに注意してください。これは、スライドアニメーションとは異なり、スムーズに移動したいスライドアニメーションとは異なり、steps(1)値を突然変更したいからです。 z-index

  コードの読みやメンテナンスが簡単になりました。數回の畫像をサポートする方法をよりよく理解できます。私たちがする必要があるのは、アニメーションの遅延とキーフレームの割合を更新することです。前の投稿で作成したまったく同じループを使用して、円形スライダーの複數の畫像をサポートできるため、遅延は簡単です。
  これは、通常のCSSからSASSに移行していることを意味します。次に、n畫像でタイムラインがどのように変化するかを想像する必要があります。アニメーションが3つの段階に分かれていることを忘れないでください。

  <code>.gallery  {
    display: grid;
    width: 220px; /* 控制大小 */
  }
  .gallery > img {
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 10px solid #f2f2f2;
    box-shadow: 0 0 4px #0007;
  }</code>

  「右スワイプ」と「左スワイプ」の後、畫像の殘りの部分がシーケンスを完了するまで畫像は動かないままでなければなりません。したがって、「直接」部分は（n -1）と「右のスワイプ」と「スワイプ左」と同じ時間を要します。 1回の反復では、n畫像がスライドします。したがって、両方とも右スワイプし、アニメーションの合計タイムラインの100％/nの左アカウントをスワイプします。両方とも右スワイプと左のアカウントをスワイプし、アニメーションの合計タイムラインの100％/nをスワイプします。畫像は（100％/n）/2のスタックからスライドし、100％/nでスライドします。
  これを変更できます：

  …この點まで：

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

  nを3に置き換えると、スタックに3つの畫像がある場合、16.67％と33.33％が得られます。スタッキング順序のロジックは同じです。

  <code>@keyframes slide {
    0%     { transform: translateX(0%); }
    16.67% { transform: translateX(120%); }
    33.34% { transform: translateX(0%); }
    100%   { transform: translateX(0%); } 
  }</code>

  66.33％のポイントを更新する必要があります。これは、アニメーションが終了する前に畫像が

  をリセットする場所である必要があります。一方、次の畫像はスライドし始めます。スライディングパーツには100％/nが必要なため、リセットは100％-100％/nで発生するはずです：

  <code>@keyframes slide {
    0%     { transform: translateX(0%);   z-index: 2; }
    16.66% { transform: translateX(120%); z-index: 2; }
    16.67% { transform: translateX(120%); z-index: 1; } /* 我們在這里更新 z-order */
    33.34% { transform: translateX(0%);   z-index: 1; }
    100%   { transform: translateX(0% );  z-index: 1; }  
  }</code>

  しかし、z-indexアニメーションが機能するためには、順序の後半で発生するはずです。最後の畫像に行った修正を覚えていますか？最初の畫像がスタックから移動したときに、スライドを開始するときではなく、

  値をリセットする必要があります。 KeyFramesで同じ推論を使用できます：

  <code>我們的眼睛 ? --> 第三張 (2) | 第二張 (2) | 第一張 (2)</code>

  z-order-last完了です！ 5つの畫像を使用するときに得られた結果は次のとおりです。 z-index少しスピンを追加して物事をきれいに見せることができます：

  私がしたのは、

  <code>我們的眼睛 ? --> 第二張 (2) | 第一張 (2) | 第三張 (1)</code>

  屬性に追加することだけでした。ループでは、

  ランダムな角度を使用して定義します：

  回転は、スタックの後ろにジャンプする畫像を見ることができるため、小さな障害を引き起こす可能性がありますが、それは問題ではありません。 rotate(var(--r))

  要約

  このz-index作業(yè)はすべて、巨大なバランスをとる行為ですよね？この演習の前にスタッキング順序がどのように機能するかわからない場合は、今ではそれをよりよく理解できるかもしれません！いくつかの説明を理解するのが難しい場合は、この記事をもう一度読んで、鉛筆と紙でコンテンツを描くことを強くお勧めします。さまざまな數の畫像を使用して、アニメーションの各ステップを説明して、この手法をよりよく理解してみてください。

  前回、幾何學的なトリックを使用して、完全なシーケンスを完了した後に最初の畫像に戻る円形スライダーを作成しました。今回は、同様の手法を完了するためにz-indexを使用しました。どちらの場合でも、連続アニメーションをシミュレートするために畫像をコピーしませんでしたし、JavaScriptを使用して計算を支援しませんでした。

  次回は、3Dスライダーを作成します。乞うご期待！

以上がポラロイド畫像をめくるCSS Infiniteスライダーの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。