今回はフルスクリーン背景画像のスライドショーをCSSのみで作成したいと思います。イメージを色々とトランジットさせるのと、CSSアニメーションを使ってタイトルも表示させたいと思います。
デモで使用しているイメージはMark Sebastianさん撮影のもので、Creative Commons Attribution-ShareAlike 2.0 Generic Licenseにライセンスされています。
今回の効果はCSS animationsをサポートしているブラウザでないと動作しませんのでご注意ください。
こちらのチュートリアルは、私たちが実験している最新のCSS3の一部分にすぎません。他にも色んなことを試しているのでよろしければご覧くださいね。
- Original Hover Effects with CSS3 （イケテルオリジナルマウスオーバーCSS3アニメーション）
- Animated Buttons with CSS3 （CSS3の気になる効果でアニメーションボタン）
- Splash and Coming Soon Page Effects with CSS3（CSS3を使ってイントロアニメーションを作る）
- Experiments with background-clip: text
- Experimental CSS3 Animations for Image Transitions
- Slopy Elements with CSS3
- CSS3 Lightbox
この記事は、http://tympanus.net/codrops/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。
HTMLマークアップ
スライドショーの部分にはULリストを使います。個々の画像にはSPANタグをつけて、タイトル部分のH3タグはDIVタグでラッピングします。
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3>re·lax·a·tion</h3>
</div>
</li>
<li><!--...--></li>
<li><!--...--></li>
</ul>
SPANタグはスタイリング時にスライドショー用の背景画像を含有する要素になります。
CSSスタイリング
それではULリスト部分のスタイリングから始めましょう。ポジションはFIXEDで、表示域まで引き延ばします。また、イメージ上にパターンを表示させる為に:after疑似要素も使います。
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
今回はドットパターンを繰り返し使用しておりますが、透過させたCSSグラデーションなども勿論代用可能です。
スライドショーのイメージ用SPANタグはabsoluteで絶対配置し、幅と高さは１００％に設定します。このSPANタグにはテキストが含まれているのですが、それが見えてしまったら困るので文字色（color）を透過させます。そして背景サイズのプロパティは「cover」にします。こうすることにより背景画像が要素の全領域をカバーしてくれます。要素の全領域とは結局画面サイズの事なので、可視表示域全てをカバーすることになります。透過度は「０」にセットします。これからアニメーションで変化を加えていきます。
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
SPANのアニメーション間隔は３６秒で止まることなく無限に続きます。それから詳細部分でタイトルのDIVタグもスタイリングしておきましょう。
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
タイトル用DIVタグも３６秒間隔にしておきましょう。
ここで背景画像用の全てSPANタグが時間差で流れるように設定します。どういうことかというと、スライドショーのイメージとタイトルが６秒ごとに切り替わるようにするということです。
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 30s;
}
それではスライドショーのアニメーションを見てみましょう。SPANのアニメーションは３６秒間隔です。この３６秒間の間に、透過を変更させています。まずアニメーションが８％まで達した時に透過を０から１に変更し、１７％まではそのまま維持します。２５％に達したら０に戻し、最後まで０のままです。
なぜこんな値になるかというと、各イメージを６秒間隔で可視状態にしたいのと、各サイクルの終わりには１つ目のイメージが再び表示されるようにしておきたいからです。イメージは全部で６つあるので、ひとつのサイクルには３６秒を要します。その為透過度に応じて値を「計る」必要があります。２つ目のイメージがアニメーションし始めるのは６秒後なので、１つ目の画像がアニメーションの何パーセンタイルでフェイドアウトするべきか調べる必要があります。６を３６で割ると０．１６６６６６になり、これはキーフレームのステップだと大体１６％位です。そしてイメージをただパッと消したいわけでは無いので、例えば８％などその途中の段階も必要となってきます。この時点で画像を完全に表示させて、また１７％に達したらフェイドアウトさせ始めて２５％の時点で完全に消えるようにします。
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
タイトル部分も同様です。けれどタイトルに関してはもう少し早く消してしまいたいので、１９％の時に０に戻します。
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
アニメーションをサポートしていないブラウザでは、SPANの透過を１にすることにより単純にスライドショーの最後のイメージを表示させています。
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
no-cssanimationのクラスはModernizrによって追加されます。
それと表示域が小さかった場合のフォントサイズも調整しておきましょう。media queriesを使って、特定の幅の場合には小さ目のフォントが表示されるようにします。
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
これでシンプルバージョンのスライドショーは完成です！ここからはもう少しトランジッションにスパイスを加えてみたいと思います。
アニメーションの他のアイデア
イメージとタイトルを表示させる為のアニメーション部分を少しいじってみましょう。
以下のアニメーションでは、イメージを少し拡大して回転させています。
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
タイトルは右からスライドさせ、左側にスライドしながらフェイドアウトさせています。（text-alignは「right」に変更しています。）
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
他にも色々な動かし方があると思いますので、色々試してみてください！
デモ
他にもバラエティに富んだアニメーションのサンプルをご用意しました。
- Demo 1: シンプルなフェイドインとフェイドアウト
- Demo 2: タイトルは右からスライドさせて、画像を若干回転
- Demo 3: イメージは上へ、タイトルは下へ移動
- Demo 4: イメージ拡大、タイトルは下からスライドさせ拡大しながらフェイドアウト
今の所、ChromeやSafariなどWebkitブラウザでご覧いただくと一番スムーズに表示されるかと思います。
今回のチュートリアル、楽しんでいただけましたか？活用して色々アレンジしてみてくださいね。
