CSSとjQueryでパララックスとアニメーションを実現

今回は、弊社の制作事例から、CSS3とjQueryを使ってパララックスやアニメーションを実現した化粧品のブランドサイトついてまとめてみました。

jQueryでパララックス
最近多くのサイトで利用されているパララックス。
「視差効果」とも呼ばれていますが、Webデザインで取り入れられるエフェクトのひとつです。
複数オブジェクトをスクロールするスピードを調整することで、奥行きのある立体的な空間を疑似的に生み出し、ユーザーに錯覚を起こさせる見せ方です。

クリックをさせずにスクロールだけでユーザーをページ下部まで誘導し、他ページに遷移させずに多くの情報を見せられる点や、ストーリー仕立てで見せたり、何かの空間に見立てたり、設計やデザイン次第でユニークな演出が出来ることなどが、メリットと言えるでしょう。
1ページが長すぎたり要素が多すぎると読み込み時間がかかるというデメリットもありますので、サイトの特性によって使い分ける事が必要となります。

Liretyブランドサイト
http://www.virtue-ec.com/lirety/index.html

◇デザインする上で気をつけたこと
1:パララックス効果を理解する
パララックスは異なるレイヤーのスクロール速度を変える事で、視差効果を与え奥行きを出す効果のこと。
まずは、その基本となる部分をデザイナーがしっかり理解し、動きをイメージした上で着手します。

2:重くなりすぎないように
ページが重くなりすぎないように考慮します。
シンプルなデザインであれば大きな問題はないですが、写真を多用する場合、アニメーションと組み合わせする場合など、ページの長さを調整するなどして、バランスを考慮しながらデザインするのも重要なポイントです。

3:奥行きを出すために
ぼかした画像をあえて手前に大きく配置する事で視差効果をプラスしさらに奥行き感を表現することができます。

Liretyブランドサイト

4:動きを制作サイドへしっかり伝える
デザインを制作サイドへ引き継ぐ際、イメージしている動きをしっかり伝えなくてはいけません。
手書きでラフを作成したり参考サイトを見たりなど、イメージを共有するための工夫が必要です。

◇使用するjsなど
デザイナーから引き継いだ制作サイドは、デザイナーがイメージしている動きに適したプラグインを探します。
プラグイン同士のバッティングによって干渉しあう場合があるため、それを考慮しながらプラグインを探すのは一苦労です。プラグインが見つからない場合には当然スクラッチでの実装となる場合もあります。

今回使用したプラグインをご紹介します。

【jquery-parallax-1.1.3】
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
ダウンロードすると以下のjsが入っています。

[jquery.parallax-1.1.3.js]
このjsは、スクロールバーの位置に応じて各divごとの背景画像を制御する、という役割を持っています。
各要素のスクロールスピードを調整してパララックス効果を生み出すのですが、「scrollTop」という値で、「何ピクセルスクロールしているのか」という値を取得、それを元に動かしたい要素の座標値やサイズを指定し、それで視差効果を与えているわけです。
「●●pxで〜な動きをつける」というように、値を見ながら地道にひとつひとつ動きを調整していく作業となります。

[jquery.localscroll-1.2.7-min.js]
[jquery.scrollTo-1.4.2-min.js]
この2つは、サイドナビゲーションをうまく動かすのに必要なjsです。(今回は使用していません)

【jquery.nicescroll】
http://areaaperta.com/nicescroll/
スクロール時に慣性スクロールで余韻を残す効果があります。
(※スクロールをとめてもすぐには止まらず、余韻が残ります。)
オプションでスクロールバーのデザインやスクロールのスピード等を変更する事が出来ます。

◇パララックスサイトを作る時に考えなければならないこと。
全てのオブジェクトを同様に動かしても、それは単に動作が重いとしか感じられなくなるので、ユーザーに不快感を与えてしまう可能性もあります。スクロールに伴うオブジェクト移動のスピード「差」によって疑似的に立体感を感じさせるので、少なくとも2つ以上の異なるスピードを持ったオブジェクトを動かす必要があります。
また、オブジェクト間の奥行きや、スピード「差」が大きすぎると、それぞれの動きに統一感が無いように見え、立体感が感じられなくなるので、奥行きやスピードを調整したり、間に異なるオブジェクトを入れたりすると良いようです。

CSSとjQueryでアニメーション
ブランドイメージをより印象づけるために、CSSとjQueryでダイナミックな動きを加えました。

□要素のフェードイン・フェードアウト
要素ごとに、段階的にフェードインするようなアニメーションをjQueryによって実現しました。
単純にフェードインするだけでなく、スクロールによって所定の位置に配置されたときや、マウスオーバーによってフェードイン、フェードアウトしたりするなどのタイミングやアクションでアニメーションを制御したりしています。

□蝶やBrand Concept、Brand Storyの浮遊する動き
こちらもjQueryによって実現させています。
各要素の上下の動き幅、スピードを変化させています。

□成分のこだわりの要素が左右から中央へスクロールに従って集合する動き
パララックスの応用で、スクロールすると要素が画面中央に集まるエフェクトです。
「scroll_herbs.js」というjQueryをカスタマイズしています。
http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/

こちらのサイトにあるdemo(リンク)とは大きな構造が違うため、要素のスタート地点とゴール地点の座標を決定するのに少し手間取りました。

□蝶が円を描きながら羽ばたくアニメーション
CSS3で「羽ばたき」の3Dアニメーションを実現させました。
蝶が羽ばたきながらぐるりと回る3Dアニメーションは、遠近感が感じられ美しい表現を可能とします。
ただし、残念ながらCSS3のanimationやtranslate3dはIEに対応していませんので、同じような動きをIEでも表現するために、ブラウザ判定し分岐させ、IE用のjQueryを読み込みました。
複数のjQueryのプラグインを組み合わせ「蝶の羽ばたき」「楕円に沿って移動」「蝶の回転」の3つの動きを、CSS3のanimationやtranslate3dと同等レベルで実現する事が出来ました。

今回は、パララックス効果やアニメーションをCSSとjQueryを利用して実現しました。

パララックスやアニメーションなどは、使用するメリット、デメリット、それぞれあるので、プロジェクトやサイトの特性によって導入すべきかを検討する必要があります。流行っているからと言って安易に導入するのではなく、コンテンツや使用シーン、ユーザビリティなども考慮しなければならないでしょう。今回は情報量が多くないブランドサイトだったので、パララックス効果を利用して情報をコンパクトに見せ、ブランドの世界観を表現するために、アニメーション効果を散りばめました。
また、パララックス効果を実装する際には透過png画像はIEのバージョンによっては表現が難しくなったり、アニメーションはIEでは実現できなかったり、と、ブラウザによって表現が変わってくることもあるので、様々な環境も想定し構築しなければならないでしょう。