パララックスを実装するためのjQueryプラグインについてまとめました。パララックスデザインの基礎知識も掲載していますので、パララックスをはじめて聞いた方にもぜひご覧いただければと思います。
パララックスとは？
本稿のテーマはWebデザインの最新トピックであるパララックスです。本題に入る前に、パララックスとはどういったものなのか解説しておきましょう。
パララックスとは、Webデザインで最近注目されている手法の一つです。国内外のWebサイトで利用されていて、パララックスという言葉は知らなくても日ごろから目にしている方は多いことでしょう。なお、パララックスは日本語では視差効果と訳されています。
百聞は一見にしかず、ということで、実際にパララックスを採用しているサイトを見てみましょう。例として、シンガーソングライターの森山直太朗さんの公式サイトをご紹介します。
こちらのサイトでは、スクロールをした時の動きの特徴があっておもしろいですね。スクロールに応じて、背景と前面のコンテンツが異なるスピードで動きます。パララックスとは、このようにいくつかの層（レイヤー）を異なるスピードで動かすデザイン手法のことなのです。
パララックスを採用することで、立体的なエフェクトを盛り込むことができるようになります。遠近感を盛り込んだり、同じく最近のトレンドであるシングルページ型のWebデザインとの親和性も高いです。
下のサイトでは、日常生活で私たちが水を消費している様子が紹介されています。パララックスはこのように、ストーリー性のあるコンテンツとの相性も良いことで知られています。
» Every Last Drop – An Interactive Website about Water Saving
パララックスを実装できるjQueryプラグイン7選
それでは、パララックスが実装できるjQueryプラグインについてご紹介していきましょう。
Jarallax
» Jarallax – Parallax scrolling javascript library
オープンソースのJavaScriptライブラリで、パララックスを実装することができます。独自にパララックスを実装するとなると結構な手間なのですが、そういったややこしい部分はJarallaxがこなしてくれます。
導入がしやすいところもメリットで、Webデザイナーやエンジニアにはお馴染みのCSSをベースに作り上げていきます。ソースコードは公式サイトからダウンロードでき、圧縮形式も提供されています。
SUPERSCROLLORAMA
SUPERSCROLLORAMAは、パララックス以外にもさまざまなエフェクトが盛り込まれたjQueryプラグインです。動きのあるWebページを作りたい場合は、役に立ってくれるはずです。
パララックス以外には、フェードインやスピン、バウンド、スライドなどの効果を実装することが可能です。ソースコードはWebサイトからダウンロードできるほか、GitHubからも入手が可能です。
Nikebetterworld.com jQuery Parallax Effect
» Nikebetterworld.com jQuery Parallax Effect Demo
Nikeのサイトデザインを参考に作成された、jQueryプラグインです。導入も難しくはないため、パララックスの実装を考えているのであれば検討してみてはいかがでしょうか。
デモサイトにあるように、2つ以上の複数のレイヤーを非同期に動かすことが可能です。ページ内にショートカットリンクを設置することで、ユーザビリティを向上することもできます。
Cool Kitten
» GitHub – jalxob/cool-kitten: A parallax scrolling responsive framework
パララックスの実装に特化したjQueryプラグインです。こちらのプラグインの特徴は、レスポンシブに対応しているところ。モバイルやタブレットでパララックスが使われている事例はまだ多くはないので、オリジナリティを出すことができるでしょう。
skrollr
» skrollr – parallax scrolling for the masses
こちらも、パララックスの実装ができるJavaScriptライブラリです。jQueryのプラグインではないのですが、パララックス系のライブラリとしてご紹介します。
パララックスが実装できることに加えて、transformやeasingなどのスタイルを盛り込むことも可能です。ソースコードのダウンロードやドキュメントはGitHubで公開されています。
jInvertScroll
» jInvertScroll – A lightweight jQuery horizontal Parallax scrolling plugin
パララックスを実装するためのjQueryプラグインです。縦にスクロールすることが一般的な中にあって、jInvertScrollは横スクロールを採用しています。独自性のあるデザインにしたい時に有効な方法でしょう。
ただし、使いどころはしっかりと考えるようにしてください。使い方を少しでも間違えると、操作しづらいページになってしまう可能性もあるからです。
Parallax Content Slider with CSS3 and jQuery
» Parallax Content Slider with CSS3 and jQuery
メインコンテンツ部ではなく、スライダーにパララックスを実装するためのjQueryプラグインです。スライダーはページのファーストビューになる重要なページ要素の一つ。ちょっとしたエフェクトを加えるだけでも、大きくユーザーの注意を惹くことが期待できるでしょう。
あとがき
パララックスを実装するためのjQueryプラグインを7つご紹介しました。Web業界では割と普及してきてはいますが、まだまだパララックスを採用しているサイトは少ないと言えます。UXの観点からも、パララックスは重要でしょう。ぜひ上手く使っていってください。