スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

パララックス(視差効果)サイトについて

「パララックス(視差効果)」と呼ばれるスクロールエフェクトを使ったウェブページについてご説明します。

スクロールをすると、背景の画像やコンテンツが次々と表示されたり、重なって現れたり、奥行きや立体感を表現でき、高い訴求効果も期待できる演出効果のひとつです。


ひとつのページに情報を集約させることで、ページ遷移の待ち時間や、スクロールだけでストーリーを見ているように情報を得ることができるため、見る側にとってもストレスが少ないのではないのでしょうか。

実際にどういうものなのかいくつかご紹介します。

http://jquery.shiftbrain.co.jp/
jQuery最高の教科書
ビジュアルや商品の一番伝えたいポイントを大きく載せ、ダイナミックに商品の紹介をしています。背景とコンテンツのスクロールを異なるスピードで動かしたパララックスの一番基本的な動きをしています。

http://www.tokyo-skytree.jp/
東京スカイツリー
まさにパララックスの効果を最大限に活用されています。
スカイツリーの見どころを上からキャラクターが降りてきて紹介してくれます。
見るだけで楽しいサイトです。

http://www.benoitchalland.com/
「Benoit Challand」のポートフォリオサイトです。
3カラムで構成されたサムネイルのスクロールのスピードが変えてあり、フラットなデザインですが奥行きがあります。

パララックスはインパクトや視覚効果が大きい分、制作側にとっては掲載する情報も厳選することが大事ですね。
また、デバイスによって表示が変わってきたり、見えなかったりする等せっかくの演出の効果を失わないように注意も十分必要です。

実際にパララックスを導入する場合は主に、JQueryのプラグインを使うことが多いようです。さらにcssだけで実装できる方法やレスポンシブにも対応したものなど、応用もたくさん出ていますね。
こういった演出効果の高いサイトの制作のご要望にも応えていけるよう日々情報収集は欠かせません。