光から移動まで、すべてCSSで作る光るアニメーション
意匠部ME課あらため、HTMLファイ部所属となった比留間です。
今回は、先日リリースした「アーバンリサーチ」のキャンペーンで
簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。
さて、今回この記事でご紹介したいのは、
これを追加したことによって、だいぶ雰囲気が出ました。（アーバンリサーチのゲームページで雰囲気を確認）
ホタルっぽい雰囲気の演出をCSSだけで作る - jsdo.it - share JavaScript, HTML5 and CSS
ということで、早速作り方に入って行きます。
実際に使ったコードは以下。
見てもらうとわかりますが、数種類のプロパティだけで実現しているのがわかります。
ベンダープレフィクス（-webkitとか）とCSS3の細かな説明は省きますが、widthとheightでサイズを、border-radiusで丸みを、そしてbox-shadowでふんわり光る光彩を演出しています。
実際のホタル風オブジェクトの生成などについてはJavaScriptで対応していますが、サイズや光加減などをすべてCSSで実現しているので、サイズや色味を自由に変更できるのが強みです。
上記のCSSを適用することでホタル風オブジェクトが表現できました。
使用している主なプロパティは以下。
これだけです。
つまり、サンプルで指定している「transform」と「opacity」の変化を監視させることで、その値が変更された際に、それをアニメーションで表示する、というものになります。
もちろん、こうした処理はCSS3のtransitionやtransformに対応していないと動作しませんが、jQueryを使えばこれと似たような処理を実現することは可能です。（animateメソッド）
今回の実装のいいところとしては、CSSで表現しているためスマートフォンでも表示可能なこと、とりわけiPhone/iPadではとてもスムーズにアニメーションが実行される点です。
Mobile Safariでは、指定方法によってはCSSによるアニメーションはGPUを利用してレンダリングされるためPCと同じようになめらかに表示される、という特性があります。
もしスマートフォンをお持ちの方は、ぜひキャンペーンサイトをスマートフォンでも見てみてください。ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」
「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。
内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、
というとてもシンプルなゲーム型キャンペーンサイトになっています。
さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。
このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を
簡単に説明したいと思います。
HTMLファイ部ということで、HTML5関連技術であるCSS3をメインに使用したものとなっています。
jsdo.itにもサンプルコードが載っているので、自分で色々といじってみたい方は以下のサンプルコードをForkしてみてください。ホタル風オブジェクトのベースを作る
まず、ホタル風オブジェクトのベースとなるオブジェクトを作ります。
今回のサンプルではdiv要素ひとつに、CSS3で色々とスタイルを当てていきます。
.fireflyDot {
width: 4px;
height: 4px;
background-color: rgba(255, 241, 202, 0.8);
border-radius: 2px;
box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9);
}
これを適用したものが↓
ホタル風オブジェクトを動かす
しかし、ただ配置しただけではただのぼやけた丸ですね。
なので動きを加えてみましょう。
そしてその動きの部分もCSSで対応します。
opacity: 0;
transition-property: transform, opacity;
transition-duration: 2.5s;
transition-timing-function: ease-out;
動きの実装で重要なのはtransitionプロパティだけ、ということになります。（移動の際の位置指定はJavaScript側で自動生成しているため）
このtransitionプロパティ、設定しておくとtransition-propertyプロパティで指定したプロパティの値（サンプルではtransform、opacity）に変化があった際、トランジション（遷移）を伴って変化を表現する、というものです。
そしてJavaScriptで移動後の位置を動的に決定し、それを指定してあげれば、あとはCSSが勝手にアニメーションをつけてくれる、というわけです。
これだけで、移動と同時に透明度も1→0と変化するためホタルが光ってふんわりと消えながら移動する、というような演出が完成します。
iPhone / Android対応
PCとほぼ同じ感じで表示されるのが分かるかと思います。
もちろん、ゲームもプレイできるので、スマートフォンからも楽しめるコンテンツとなっています。