スタッフブログ

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

パララックスを実装するためのコーディングとは

パララックスとは

パララックスを日本語に訳すと「視差」という意味になります。もともとは写真用語のことで、ファインダーと撮影レンズが離れているカメラの場合、ファインダーでのぞいた画面と、実際に写真となる画像にはずれが生じます。このずれのことを指して視差といっているのですが、Webではスクロールなどで画面を移動させるときに、階層のように重なった画像がそれぞれ異なったスピードで移動することによって立体感や遠近感を表すための方法として使われます。これを視差効果といいます。代表的なものとしてスクロールエフェクトが挙げられます。2012年頃から流行りだしたといわれていますが、その格好よさや面白さから、まだまだ人気が高い表現方法といえるでしょう。

人気の秘密とは

格好よさや面白さ以外にも、人気の秘密はあります。まずはユーザーが自分自身の操作で画面を動かせることです。再生された後は勝手に流れていく動画とは違い、自分のペースで進められることができます。ユーザーにとっては、操作しているという満足感を得ることができます。また、基本的には1ページだけで完結しているサイトが多く、ページを移動するための待ち時間によるストレスがないのも、利点といえるでしょう。その他にも、制作者サイドからすると、コンテンツにストーリー性を持たせることができたり、そこだけの特別な空間を作り上げることができたりするのも人気の秘密といえるでしょう。次から次へと現れる情報へユーザーを導いていくことも可能です。デザイン次第で、いくらでも印象的な演出をすることができるのです。

コーディングの方法とは

比較的簡単に実装できる方法としては、jQueryプラグインを使ったコーディングが挙げられます。「jarallax.js」は使い方が簡単なので、入門編としては最も適しているでしょう。その他にも「Parallax.js」や「nbw-parallax.js」などが挙げられます。Java Scriptをまったく使わずに、CSSだけでパララックス効果を可能にするコーディングもあります。しかもレスポンシブにも対応していますが、こちらは上級者向けのコーディングとなります。