logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
03-6432-0915

MENU

スタッフブログ

お見積り依頼

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


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

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

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

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

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


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

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