👨🏼‍🔬 🚶🏽 💋 CSS3ループバックスライドショー 🚕 👨🏾‍🚀 🖕🏻

CSS3のおかげで、JavaScriptを使用せずにアニメーション効果を作成できるため、多くの開発者の作業が簡素化されます。

古いブラウザはすべてのプロパティをサポートしていないため、CSS3を乱用しないでください。いずれの場合でも、CSS3の可能性をすべて確認します。この記事では、CSS3アニメーションのみを使用してループイメージスライダーを作成する方法について説明します。

- CSS3

記事のセクション

最初から最後までプロセスを理解するために、記事の内容を以下に示します。この効果は、使用されているCSS3プロパティをサポートする最新のブラウザーでのみ適切に機能することに注意してください。

はじめに

CSS3トランジションとキーフレームアニメーションに関連する基本概念の説明。
HTMLマークアップ

画像スライダーのHTMLマークアップを作成します。
CSSスタイル

スライダーを表示するスタイルシートを作成します。
CSS3キーフレームアニメーション

スライダーにアニメーションを追加します。ここで行われるさまざまなプロセスを検討します。
プログレスバー

スライダーにプログレスバーを追加します。
ツールチップ

見出しを表示するツールチップを追加します。
CSS3トランジション

CSS3トランジションを使用してホバリングするときのヒント
一時停止して再起動する

ホバーするとスライダーが停止します。
デモンストレーション

スライダーの動作を示します。
おわりに

最終的な考え。

1.はじめに

このチュートリアルを使用するには、CSS、特にCSS3トランジションとキーフレームアニメーションの基本的な理解が必要です。

これらの単純な概念の観点から、機能的な画像スライダーを作成する方法を見ていきます。

CSS3移行の基本概念

通常、CSSの値を変更すると、変更は静的に表示されます。遷移プロパティのおかげで、ある状態から別の状態に簡単に変更できます。

次の4つの遷移プロパティを使用できます。

transition-property

遷移を適用するCSSプロパティの名前を定義します。

transition-duration

遷移が発生する時間を定義します。

transition-timing-function

中間遷移値の計算方法を決定します。

transition-delay

遷移の開始時期を決定します。

CSS3トランジションは現在、Safari 3.2以降、Chrome、Firefox 4以降、Opera 10.5以降、およびIE 10でサポートされています。このテクノロジーはまだ比較的新しいため、 ブラウザーのプレフィックスが必要です 。構文は、必要なプレフィックスを追加することを除いて、すべてのブラウザーで同じです。この記事ではそれらを省略しますが、コードにプレフィックスを含めることを忘れないでください。

単純な遷移をリンクに適用する方法を見てみましょう。

 a { color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: ease-in; transition-delay: 0.3s; } a:hover { color: #fff; }

要素にアニメーションを割り当てる場合、短縮形を使用することもできます。

 a { color: #000; transition: color 0.7s ease-in 0.3s; } a:hover { color: #fff; }

W3Cには、すべての「アニメーションプロパティ」のリストがあります

基本的なCSS3アニメーションの概念

CSSアニメーションを使用すると、一連のキーフレームを使用してJavaScriptなしでアニメーションを作成できます。

CSSトランジションとは異なり、キーフレームアニメーションは現在WebKitブラウザー、Firefox、およびIE 10でのみサポートされています。サポートされていないブラウザーはアニメーションコードを無視します。

アニメーションプロパティには8つのサブプロパティがあります。

animation-delay

アニメーションをいつ開始するかを決定します。

animation-direction

アニメーションを交互のループで反対方向に再生するかどうかを決定します。

animation-duration

アニメーションが1サイクルを完了するのにかかる時間の長さを定義します。

animation-iteration-count

停止する前のアニメーションサイクルの数を決定します。

animation-name

@keyframesでルールの名前を定義します。

animation-play-state

アニメーションが再生中か一時停止中かを決定します。

animation-fill-mode

CSSアニメーションが実行の前後にゴールにスタイルを適用する方法を決定します。

ブロックに単純なアニメーションを適用する方法を見てみましょう。

 /* ,     . */ div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; -moz-animation-name: move; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -moz-animation-delay: 0.5s; -moz-animation-iteration-count: 2; -moz-animation-direction: alternate; -webkit-animation-name: move; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; } /*   . */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } @-moz-keyframes move { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100px); } } @-webkit-keyframes move { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100px); } }

略記法を使用して、すべてのアニメーションプロパティを一度に設定できます。

 div { animation: move 1s ease-in-out 0.5s 2 alternate; -moz-animation: move 1s ease-in-out 0.5s 2 alternate; -webkit-animation: move 1s ease-in-out 0.5s 2 alternate; }

キーフレーム

各キーフレームは、アニメーションの特定の時点でアニメーション要素がどのように動作するかを示します。キーフレームは、時間を決定するためにパーセント値を取ります：0％-アニメーションを開始し、100％-終了。オプションで、アニメーションの中間フレームを追加できます。

 /*   0%  100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /*     */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }

W3Cには、「 CSS3アニメーション」に関する有用かつ詳細な情報がたくさんあります。

スライダーの基本構造

トランジションとアニメーションの仕組みがわかったので、CSS3のみを使用してスライダーを作成する方法を見てみましょう。このスケッチは、アニメーションの動作方法を示しています。

ご覧のとおり、スライダーは画像が表示されるコンテナになります。

アニメーションは非常に単純です。画像は指定された方向に従い、「 top

」、「 z-index

」、「 opacity

」のプロパティを変更します。

HTMLマークアップに直接進んで、スライダーを作成しましょう。

2. HTMLマークアップ

HTMLマークアップは非常に簡単です。それはよく組織され、SEOに優しいです。最初に完全なコードを見てから、すべてがどのように機能するかを詳細に調べましょう。

 <div class="container"> <div id="content-slider"> <div id="slider"> <!--    --> <div id="mask"> <!--  --> <ul> <li id="first" class="firstanimation"> <!-- ID        --> <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div> <!--   --> <div class="progress-bar"></div> <!--  --> </div> <!--     --> </div> </div>

div id="slider"

これがメインのスライダーコンテナーです。特定の機能はありませんが、アニメーションを一時停止するために必要です。

div id="mask"

このブロックを使用して、スライダーの外側で発生するすべてを非表示にします。これに加えて、マスクを使用すると、スライダーの内容を表示できます。

li id="first" class="firstanimation"

各リスト項目にはIDとクラスがあります。 IDはツールチップを表示し、クラスはこれから行われるアニメーションに関連付けられています。

div class="tooltip"

このブロックには、画像のタイトルが表示されます。必要に応じて、クリック可能にする、短い説明を追加するなど、変更できます。

div class="progress-bar"

このブロックには、アニメーションの進行状況を表示する機能が含まれています。

次に、CSSファイルを作成します。

3. CSSスタイル

基本的なスライダー構造を作成しましょう。画像と同じサイズになります。 borderプロパティは、画像の周囲に境界線を作成するのに役立ちます。

 /*   */ #slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }

mask

クラスは、スライダーの外側にあるすべての要素を非表示にします。その高さは、スライダーの高さと等しくなければなりません。

 /*      */ #mask { overflow: hidden; height: 320px; }

最後に、画像のリストをソートするには、「 position: absolute

」と「 top: -325px

」を使用して、すべての画像がスライダーの外側に配置されるようにします。

 /*   */ #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 680px; /*   */ height: 320px; /*   */ position: absolute; top: -325px; /*   (  ) */ list-style: none; }

これらの数行のコードで、スライダーマークアップを作成しました。次に、アニメーションを追加するだけです。

4. CSS3キーフレームアニメーション

アニメーションを開始する前に、アニメーションの正しいプレゼンテーションを取得するためにいくつかのパラメーターを定義する必要があります。

知っているように、アニメーションの全期間は25秒ですが、1秒間にキーフレームがいくつあるかを知る必要があります。

キーフレームの正確な数とアニメーションの全継続時間を提供する一連の操作を解決しましょう。計算は次のとおりです。

スライダー内の画像の総数を決定します： 5 ;

各画像のアニメーションの持続時間を決定します： 5秒 ;

アニメーションの全期間を決定するには、画像の合計数に各期間を乗算します。5つの画像×5秒= 25秒 。

1秒間にいくつのキーフレーム（パーセント）になるかを計算します。

キーフレームの総数をアニメーションの全期間で除算します： 100％/ 25 = 4％ 、

1秒で4つのキーフレーム、または1秒がアニメーションの4％になります。

このすべての数学により、CSSアニメーションをスライダーに適用できるようになりました。アニメーションを無限ループに入れることができます。なぜなら、画像ごとに、他の画像とは独立した個別のアニメーションが設定されます。

 #slider li.firstanimation { animation: cycle 25s linear infinite; } #slider li.secondanimation { animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { animation: cyclefive 25s linear infinite; }

アニメーションのプロパティを割り当てたら、キーフレームを使用してアニメーションを設定する必要があります。

この原則に従って、すべてのアニメーションを互いに独立させることができます。これにより、無限のサイクルがもたらされます。

ある画像から次の画像への移行をより魅力的にするために、プロパティ「 opacity

」および「 z-index

」を追加しました。

コードを見るとわかるように、最初のアニメーションには他のアニメーションよりも多くのキーフレームがあります。これは、スライダーを起動すると、最初の画像が2番目の画像のためのスペースを解放しますが、最後の画像がアニメーションを終了するとき、最初の画像には追加のキーフレームが必要で、アニメーションサイクル間で中断が生じないためです。

すべてのアニメーションコードは次のとおりです。

 /*  */ @keyframes cycle { 0% { top: 0px; } /*   ,     */ 4% { top: 0px; } /*   */ 16% { top: 0px; opacity:1; z-index:0; } /*  4%  16 % (3 )   */ 20% { top: 325px; opacity: 0; z-index: 0; } /*  16%  20% (1 ) */ 21% { top: -325px; opacity: 0; z-index: -1; } /*        */ 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } /*  96%  100% (1 ) –  */ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -325px; opacity: 0; } /*      */ 16% { top: -325px; opacity: 0; }/*    16% */ 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } /*  20%  24% (  1 ) — */ 36% { top: 0px; opacity: 1; z-index: 0; } /*  24%  36 % (3 )   */ 40% { top: 325px; opacity: 0; z-index: 0; } /*  36%  40% (1 )—  */ 41% { top: -325px; opacity: 0; z-index: -1; } /*     */ 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100%{ top: 325px; opacity: 0; z-index: 0; } }

アニメーションを作成したら、プログレスバーを追加して、各アニメーションの継続時間を表示する必要があります。

5.プログレスバー

進行状況バーをアニメーション化するプロセスは、スライダーの場合と同じです。進行状況バーを作成します。

 /*   */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }

構文を恐れないでください。「from to」と同じ機能があります。キーフレームによって各画像の表示と非表示が設定されることがわかります。

 /*    */ @keyframes fullexpand { /*       */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /*   —  */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /*   —   */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /*          */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /*       ,     */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }

6.ツールチップ

スライダーはほぼ完全です。より機能的にするために、いくつかの詳細を追加しましょう。ホバーすると表示される画像ヘッダーのツールチップを挿入します。

ヒントのスタイル：

  #slider .tooltip { background: rgba(0,0,0,0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; } #slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 10px; }

ここでは、イメージヘッダーのみを表示しましたが、テキスト、リンク、および必要なものに同じことができます。

7. CSS3トランジション

CSS3トランジションを要素に適用する方法を見ましたが、今度はヒントのためにそれらを作成しましょう。

覚えている場合は、各リストにID（「最初」、「2番目」など）を追加したため、各ヒントをホバーすると個別の画像に関連付けられ、すべてのヒントは一度に表示されませんでした。

 #slider .tooltip { … transition: all 0.3s ease-in-out; } #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip { left: 0px; }

8.一時停止と再起動

ユーザーがスライダーを一時停止してコンテンツを表示できるようにするには、その上にカーソルを置いたときにアニメーションを停止する必要があります。また、進行状況バーのアニメーションを停止する必要があります。

 #slider: hover li, #slider: hover .progress-bar { animation-play-state: paused; }

9.デモンストレーション

最後に、レッスンが終わりました。スライダーの準備が完了しました！

スライダーデモ（ Alternative Source ）をご覧ください。 Firefox 5以降、Safari 4以降、Google Chrome、iPhone、iPadで動作します。アーカイブ（代替ソース）をダウンロードすることもできます。

画像を提供してくれたMassimo Righiに感謝します。

10.結論

効果は印象的ですが、確かに、このスライダーはあまり汎用的ではありません。たとえば、画像をさらに追加するには、すべてのキーフレームを編集する必要があります。 CSS3には大きな可能性がありますが、制限があり、対象となる視聴者によってはJavaScriptが望ましい場合もあります。

このスライダーには、一時停止（ホバー時）やユーザーがスライダーを操作できるユニークな画像リンクなど、いくつかの興味深い機能があります。すべてのブラウザーで完全なサポートが必要な場合は、CSS3を使用できないため、JavaScriptをお勧めします。残念ながら、CSS3アニメーションには多くの制限があります。現時点では、柔軟性が不足しているため、広く使用される可能性はありません。この記事が、CSS3をさらに学ぶことを奨励することを願っています。

コメントでご意見をお聞かせください。

翻訳者から：

翻訳エラーを見つけた場合は、プライベートメッセージで登録を解除してください。ありがとう

CSS3ループバックスライドショー