Day: January 18, 2012

CSS3フルスクリーン背景スライドショー

今回はフルスクリーン背景画像のスライドショーを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タグでラッピングします。 SPANタグはスタイリング時にスライドショー用の背景画像を含有する要素になります。 CSSスタイリング それではULリスト部分のスタイリングから始めましょう。ポジションはFIXEDで、表示域まで引き延ばします。また、イメージ上にパターンを表示させる為に:after疑似要素も使います。 今回はドットパターンを繰り返し使用しておりますが、透過させたCSSグラデーションなども勿論代用可能です。 スライドショーのイメージ用SPANタグはabsoluteで絶対配置し、幅と高さは100%に設定します。このSPANタグにはテキストが含まれているのですが、それが見えてしまったら困るので文字色(color)を透過させます。そして背景サイズのプロパティは「cover」にします。こうすることにより背景画像が要素の全領域をカバーしてくれます。要素の全領域とは結局画面サイズの事なので、可視表示域全てをカバーすることになります。透過度は「0」にセットします。これからアニメーションで変化を加えていきます。 SPANのアニメーション間隔は36秒で止まることなく無限に続きます。それから詳細部分でタイトルのDIVタグもスタイリングしておきましょう。 タイトル用DIVタグも36秒間隔にしておきましょう。 ここで背景画像用の全てSPANタグが時間差で流れるように設定します。どういうことかというと、スライドショーのイメージとタイトルが6秒ごとに切り替わるようにするということです。 それではスライドショーのアニメーションを見てみましょう。SPANのアニメーションは36秒間隔です。この36秒間の間に、透過を変更させています。まずアニメーションが8%まで達した時に透過を0から1に変更し、17%まではそのまま維持します。25%に達したら0に戻し、最後まで0のままです。 なぜこんな値になるかというと、各イメージを6秒間隔で可視状態にしたいのと、各サイクルの終わりには1つ目のイメージが再び表示されるようにしておきたいからです。イメージは全部で6つあるので、ひとつのサイクルには36秒を要します。その為透過度に応じて値を「計る」必要があります。2つ目のイメージがアニメーションし始めるのは6秒後なので、1つ目の画像がアニメーションの何パーセンタイルでフェイドアウトするべきか調べる必要があります。6を36で割ると0.166666になり、これはキーフレームのステップだと大体16%位です。そしてイメージをただパッと消したいわけでは無いので、例えば8%などその途中の段階も必要となってきます。この時点で画像を完全に表示させて、また17%に達したらフェイドアウトさせ始めて25%の時点で完全に消えるようにします。 タイトル部分も同様です。けれどタイトルに関してはもう少し早く消してしまいたいので、19%の時に0に戻します。 アニメーションをサポートしていないブラウザでは、SPANの透過を1にすることにより単純にスライドショーの最後のイメージを表示させています。 no-cssanimationのクラスはModernizrによって追加されます。 それと表示域が小さかった場合のフォントサイズも調整しておきましょう。media queriesを使って、特定の幅の場合には小さ目のフォントが表示されるようにします。 これでシンプルバージョンのスライドショーは完成です!ここからはもう少しトランジッションにスパイスを加えてみたいと思います。 アニメーションの他のアイデア イメージとタイトルを表示させる為のアニメーション部分を少しいじってみましょう。 以下のアニメーションでは、イメージを少し拡大して回転させています。 タイトルは右からスライドさせ、左側にスライドしながらフェイドアウトさせています。(text-alignは「right」に変更しています。) 他にも色々な動かし方があると思いますので、色々試してみてください! デモ 他にもバラエティに富んだアニメーションのサンプルをご用意しました。 Demo 1: シンプルなフェイドインとフェイドアウト Demo 2: タイトルは右からスライドさせて、画像を若干回転 Demo 3: イメージは上へ、タイトルは下へ移動 Demo 4: イメージ拡大、タイトルは下からスライドさせ拡大しながらフェイドアウト 今の所、ChromeやSafariなどWebkitブラウザでご覧いただくと一番スムーズに表示されるかと思います。 今回のチュートリアル、楽しんでいただけましたか?活用して色々アレンジしてみてくださいね。

詳細を読む »