ポラロイド画像をめくるCSS Infiniteスライダー-CSSチュートリアル-php.cn

CSS Infinite Slider Flipping Through Polaroid Images

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

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

CSSスライダーシリーズ

円形回転式画像スライダー
Polaroid Picture Page Turn（あなたは今！）無限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

さて、すべての画像に同じトリックが適用されることを想像してください。画像を区別するために

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

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

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

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

最初の画像をスライドさせます（1）。最後の画像（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）ポイントで状態を定義する代わりに、画像をデッキに戻す前に値を下げる前に、ほぼ同じポイント（16.66％および16.67％）で2つの状態を定義します。 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）画像で機能させましょう。しかし、最初に、アニメーションを分割して冗長性を避けることで、作業をわずかに最適化できます。
<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作業はすべて、巨大なバランスをとる行為ですよね？この演習の前にスタッキング順序がどのように機能するかわからない場合は、今ではそれをよりよく理解できるかもしれません！いくつかの説明を理解するのが難しい場合は、この記事をもう一度読んで、鉛筆と紙でコンテンツを描くことを強くお勧めします。さまざまな数の画像を使用して、アニメーションの各ステップを説明して、この手法をよりよく理解してみてください。

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

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