スタッフブログ

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

パララックスの効果がわかりやすい参考サイト

パララックスとは

パララックスとは直訳すると視差という意味で、視界が移動するときに対象物がそれぞれ違うスピードで動くことにより、遠近感や立体感を表現することです。この視差効果を使ったWebサイトでは、スクロールなどで画面を移動させると各要素が次々と表示されたり、違ったスピードで動いたりすることで立体感があるページを構成することができます。この効果により一つのページの中でいろいろな情報を見ることができ、動きのあるページで楽しみながら情報を得ることができるという事で人気です。今回はそんな視差の効果をよく実感できるサイトをご紹介します。

視差効果を実感できる参考サイト

まずは効果がわかりやすい、動きの大きなサイトからご紹介します。

http://www.aleeforoughi.com/

こちらはフリーのグラフィックデザイナーAlee Foroughiさんのポートフォリオサイトです。スクロールすることで画面全体が大きく動き、スクロールがある位置まで行くと今まで手掛けた仕事の件数がカウントされるなど変化が多く、見ていて楽しくなるサイトです。

次はパラパラマンガのような動きをするサイトです。

http://www2.nissan.co.jp/SP/NOTE/SPECIAL/

日産のNOTEという車種のサイトで、スクロールさせることでストーリーが展開していくので、最後までスクロールしたくなります。またWebサイトなのにパラパラマンガのようなアナログさも魅力です。

最後に横スクロールのサイトです。

http://www.nintendo.com.au/gamesites/mariokartwii/#ds

任天堂Wiiのマリオカートの海外サイトで、各要素の動きとしては大きくはないのですが、キャラクターの立体感でこの効果を実感しやすいサイトです。

3つの参考サイトで視差効果を実感していただけたでしょうか?この効果はインパクトがあり、演出効果の高いWebサイト制作にはとても有用です。しかしスマホやタブレットなどデバイスによっては表示されなかったりと、効果が伝わらないこともあるので注意が必要です。またパララックスを導入するには、JQueryのプラグインを使う方法が多いようですが、CSSだけで実装する方法など応用も多くあり、専門知識や技術が必要な場合もあるので、コーディング代行を利用するのがおすすめです。