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

MENU

スタッフブログ

お見積り依頼

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

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

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

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だけで実装する方法など応用も多くあり、専門知識や技術が必要な場合もあるので、コーディング代行を利用するのがおすすめです。