[CSS]パラパラ漫画のように画像を次々に表示させるCSS3アニメーションを使ったスライドショー
Post on:2012年5月11日
マウスのホバー時に、画像を次々に表示させるスタイルシートを紹介します。
デモはモデルのかっこいい写真ですが、これはパラパラ漫画だ!と思いましたw
How to Create a Fast Hover Slideshow with CSS3
[ad#ad-2]
デモ
デモは2つあり、Firefox, Chrome, Safari, Operaでご覧ください。
まずは、デフォルトのデモから。
ホバーすると、画像が次々に表示されます。
デモ:Default:ホバー時
[ad#ad-2]
二つ目のデモは、タイトル付きです。
実装
HTML
HTMLはシンプルで、複数のimg要素とオーバーレイで表示させているテキストをdiv要素で内包します。
<div class="hs-wrapper"> <img src="images/1.jpg" alt="image01"/> <img src="images/2.jpg" alt="image02"/> <img src="images/3.jpg" alt="image03"/> <img src="images/4.jpg" alt="image04"/> <img src="images/5.jpg" alt="image05"/> <img src="images/6.jpg" alt="image06"/> <img src="images/7.jpg" alt="image07"/> <img src="images/8.jpg" alt="image08"/> <div class="hs-overlay"> <span>Summer <strong>2012</strong></span> </div> </div>
CSS
まずは、画像の設定です。
画像はアニメーションで表示・非表示にします。ホバー時にアニメーションを開始し、通常時はアニメーションを中止します。
画像を8枚配置したので、アニメーションの時間を0.8秒にします。
.hs-wrapper img{ top: 0px; left: 0px; position: absolute; animation: showMe 0.8s linear infinite 0s forwards; animation-play-state: paused; } .hs-wrapper:hover img{ animation-play-state: running; }
画像は全て重ているので、表示状態にあるものをz-indexで一番上にします。
@keyframes showMe { 0% { visibility: visible; z-index: 100; } 12.5% { visibility: visible; z-index: 100; } 25% { visibility: hidden; z-index: 0; } 100% { visibility: hidden; z-index: 0; } }
アニメーションの尺は0.8秒なので、画像がそれぞれ表示されるように0.1秒ずつずらしてセットします。
.hs-wrapper img:nth-child(1){ z-index: 9; } .hs-wrapper img:nth-child(2){ animation-delay: 0.1s; z-index: 8; } .hs-wrapper img:nth-child(3){ animation-delay: 0.2s; z-index: 7; } .hs-wrapper img:nth-child(4){ animation-delay: 0.3s; z-index: 6; } <!-- ... and so on -->
最後に、オーバーレイのスタイルです。
ホバー時にフェードで表示・非表示になるようにします。
.hs-overlay{ position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 500; background: rgba(0,0,0,0.6); box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset; pointer-events: none; transition: all 0.3s linear; } .hs-wrapper:hover .hs-overlay{ opacity: 1; box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset; }
sponsors