Day: February 14, 2012

CSS3は様々な可能性への扉を開いてくれました。今日はCSS3アニメーションを使い、スプラッシュとComing Soon（準備中）ページ効果の作り方をご紹介したいと思います。まるでシンプルな要素に命を吹き込んだかのように自由に動かす方法と、アニメーションシーケンスを実現していますのでお楽しみに。 １つ目のデモで使用しているかわいらしい靴の画像は、これまたかわいらしいAmira Almajidさんによるもので、画像のセットはこちらからご利用いただけます。 ※尚、アニメーションをサポートしているブラウザでのみ動作しますので、ご注意くださいね。 チュートリアルがあんまりにも長くなり過ぎないように、ベンダープレフィックスは省略していますので、こちらも併せてご了承くださいね。それでは早速参りましょうか！ この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 Demo 1 こちらのデモでは画像読込みの時間を確保する為に、アニメーション開始までにかなりのゆとりを持たせています。 １つ目のデモではアニメーション化させる要素が幾つかあります。今回のテーマは「Coming Soon（準備中）」です。 まずコンテンツ部分にメインとなるコンテナ（クラス：sp-container）を用意し、その中にサムネイル用の束をそれぞれ記述しています。それからメインのヘッドライン用の束も用意します。メインコンテンツエリアが表示された後に、E-mailアドレス入力枠をスライドインさせています。 HTMLマークアップ では、次はCSSのスタイリングを見てみましょう！ CSSスタイリング １つ目のデモの主な目的は、以下のようなアニメーションの連続を実現させることです。 fromBackを使ってサムネイル出現 fromBackを使って１つ目のH1タグの出現 fromBackを使ってサブヘッドラインのH2タグ出現 fadeOutを使って１つ目のH1タグとサブのH2タグの消滅 fadeOutを使ってサムネイルが順番に消え始め、fadeInColorで２つ目のH1タグを表示それからsizeDownMoveを使ってコンテンツを左に移動と縮小 slideInを使って矢印とサイドコンテンツをスライド それではメインのコンテナをセンタリングして、コンテンツはabsoluteで絶対配置しましょう。 ご覧いただいて分かるように、６秒後にコンテンツへ「動き」と「拡大」のアニメーションを適用させています。この辺のアニメーションはまた後で見ていくことにします。 矢印用のsp-arrowクラスには矢印を背景画像として設定し、absoluteで絶対配置しています。 サイドコンテンツのsp-sideクラスにはE-mailアドレス入力枠が含まれており、画面右側に配置されるよう設定します。 この矢印とサイドコンテンツはいずれもしばらく経ってからスライドインしてきます。 では次にヘッドラインのスタイリングに移りましょう。 それから入力枠とボタン用のラッピング部分ですね。 ではここで、メインコンテンツの内部を見てみましょう。まずヘッドラインのスタイリングですが、こちらは背部から現れてきて、しばらくするとフェードアウトするように設定します。 ２つ目のヘッドラインは、１つ目のヘッドラインが消えた後にただフェードインしてくるだけです。 サブヘッドラインは１つ目のH1タグ同様現れては消えるようにします。 お次はサムネイルを格納している束の設定です。 サムネイル用のSPANタグは、現れる時に０から１へと拡大させることにより背部から登場してきたように演出しています。こちらも暫くするとフェードアウトしていきます。 それから各サムネイルが順番に現れては消えるようなシーケンスを作成したいと思います。なので行ごとに、サムネイルを囲んでいる子要素（SPANタグ）１つ１つ順番に時間差設定を施していきます。各行は上の行から順に時計回りに表示されるようにしたいので、行の順番に注意して下さいね。 ここで少し疑似要素を使って、各サムネイルの背景に円が表示されるようにしてみましょう。 お待たせしました。ここからがアニメーション部分です。 １つ目のアニメーションは透過度を１から０に変化させることにより、該当要素をシンプルにフェードアウトさせています。 fadeInColorを使って該当要素をフェードインさせ、またRGBAで背景色の設定も行っています。けれどRGBAの透過度レベルは、要素そのものの透過度が０．５に達した時点でまだ０のままです。こうすることにより要素を先に表示させ、後から背景がフェードインしてくるように細工しています。２つめのヘッドラインにも同様の設定を施しています。 次のアニメーションも極めてシンプルで、該当要素を左側からスライドインしてくるように見せています。 sizeDownMoveは該当要素を縮小させ、左（100px）から左（0px）まで移動させています。ここでtranslateを使用することも出来るのですが、要素をabsoluteで絶対配置させているので左側でちょっと動かす程度にしておこうかと思います。 次のアニメーションは、サイズを０から１に拡大することにより要素が後方から現れて来るよう見せ、同時に透過度も０から１に変化させています。 これで１つ目のデモ用のスタイリングは完成です♪次はもっとシンプルなのでご安心くださいね。 Demo 2 今度は心にグサッとくるメッセージが連続して現れるスプラッシュページなんていかがでしょうか。今回のデモでは単純にボカシ効果を加えつつ、次から次へとメッセージが表示されるような効果を実現させています。 HTMLマークアップ 今回も先ほどと同じ様な感じでコンテナとコンテンツ用にDIVタグを用意し、更にその内部の各メッセージ部分にはframeというクラスを与えています。それに加えて一番最後に表示される地球とリンク用の要素も用意します。 では早速スタイル設定を見ていきましょうか。 CSSスタイリング ヘッドラインはそれぞれ画面上でセンタリングさせ、flurFadeInOutというアニメーションを使って現れたり消えたりさせています。 それぞれのメッセージに時差設定をします。 最後の１つはアニメーション化させてず、代わりに含有しているSPANタグを順番にアニメーション化させています。 地球は実は背景画像であり、abosoluteで絶対配置しています。他のアニメーションが全て完了した14秒後にフェードインさせます。表示画面いっぱいに広がるよう拡大させています。 「join us」リンクは円形の要素で、回転しながら現れてきます。 ここからはアニメーション設定です。 １つ目のアニメーションは、現れては消えるメッセージ用のアニメーションです。text-shadowとthe scaleを巧く使ってボカシ効果を演出しています。 次のアニメーションも大体同じなのですが、今度は最後のメッセージ用で消えずに残ったままにしています。 地球用のアニメーションでは、画面一杯まで拡大させているのと、透過度を始めは増やしてそれから減らしています。 次のアニメーションはリンク用です。回転しながら現れてくるというものですね。 Demo 3 ３つ目のデモは商品やアプリを紹介する時に使えるようなアニメーションで、テキストメッセージが色んな動きを見せてくれます。 HTMLマークアップ またこちらも同じような感じでコンテナとコンテンツ用にDIVタグを用意し、更に右側用の要素と左側用の要素をそれぞれDIVタグでラッピングさせています。その狙いは右側と左側とできっちりと分けてテキストに動きを加えたいからです。 ではここからはスタイル設定です。 CSSスタイリング まず真ん中の縦線用の疑似要素を持たせたコンテンツエリアをアニメーション化させたいと思います。まるでそれが「開いて」そこからテキストが流れ出てきているかのように演出します。それから縦線の左側で連続してテキストが右からスライドインしてくるように見せます。同様に右側もで、こちらは左からスライドインさせます。sp-midクラスを適用させたSPANタグのフォントは少し大きめにしてあり、他のテキストが消え去った後でもその場に残るようにしています。２つの大き目フォントのテキストを上に移動させ、コンテンツエリア全体をギュッと詰め寄らせています。（高さを減らすことにより縦線自体も短く変化します。）最後にサインアップ用のボタンを出現させています。 コンテナ部分の幅と高さは固定します。コンテンツのラッピングはまずアニメーションのopenで出現させ、それからaqueezeを適用させることにより高さを減らしています。後者の方は他のテキストが全てフェードアウトしてから発生させる為、開始時間はかなり遅めの設定です。 真ん中の縦線は疑似要素を使って表示させています。 ヘッドライン用のラッピングではoverflowはhiddenにしてあります。こうすることによりスライドさせてもオーバーラップは見えないよう保障されます。 H2要素は内側にSPANタグを含有しており、以下のようなスタイル設定を行っています。 「sp-top」と「sp-bottom」は左からスライドしてきてから消滅します。そして「sp-mid」はフェードアウトする代わりに上に移動します。 右側でも同様の効果が現れるように設定します。ただこちら側は左から要素がスライドしてきます。 sp-midクラスを持った２つの要素が上に移動した直後に、ビックリマークがクエスチョンマークを上書きしたように見せる為、クエスチョンマークをフェードアウトさせてビックリマークを出現させています。 「sp-full」でラッピングされた最後に現れるテキストはフェードインさせて、サインアップリンクの方はズームインもさせています。 そしてここからはアニメーションです。 １つ目のアニメーションはコンテンツエリアを「開く」ことです。ただ単に高さを伸ばせば完成です。 スケーリング用のプロパティを使用していないので、squeezeアニメーションは実際は何もスクイーズしていません。この効果を適用させる時にコンテンツエリアにまだテキストが残っているのでスクイーズはさせず、ただ高さを減らすだけに留めています。 次の２つのアニメーションは要素をフェードイン、フェードアウトさせているだけです。 slideLeftとslideRightはtranslateを使用することにより反対側に要素を移動させています。 moveUpは要素を上に持ち上げています。 最後のアニメーションはscaleを０から１に変更することにより、要素をズームインさせています。 これで完成です！みなさんのお役にたてば幸いです。