パララックス(視差効果)を実装することのできるプラグインは様々あり、用途によって最適なプラグインも異なります。

今回は、パララックスを実装するためのjQueryプラグインについて、おすすめのものに厳選してまとめました。

スポンサーリンク

ScrollMagic

scroll magic
ScrollMagicは様々なパララックスを実現できるjQueryのプラグインです。

背景や画像はもちろん、スクロールに合わせてテキストや様々なCSSオプションを操作することができるので、使いこなすことができればどんなパララックスのサイトであっても作ることができるようになります。

SUPER SCROLL ORAMA


SUPER SCROLL ORAMAもScrollMagicのように自由自在にパララックスを作成できるプラグインです。

公式ページでは色々なパララックスが使われており、ここまでできるのか!と驚かされます。

このプラグインは現在開発が中止されており、「代わりにScrollMagicを使ってね。」という記述が書いてあるため、これから実装する人はScrollMagicを使った方がいいでしょう。

FadeThis


FadeThisはスクロールしたときに画像をふわっと表示させたり、画面外から登場させたりすることができるプラグインです。

スクロールした時に動いているとユーザーの注意を引きつけることができるので、特に見て欲しいものや押してほしいボタンなどにアニメーションを付けておくと、コンバージョン率のアップなどにつながりますね。

スポンサーリンク

JINVERTSCROLL

jInvertScroll
JINVERTSCROLLは横方向のパララックス効果を実装できる少し変わったプラグインです。

ほぼ全てのWebサイトが縦スクロールを採用しているため、横スクロールのページにすれば個性的なページを作ることができるのではないでしょうか。

Parallax Content Slider


Parallax Content Sliderはスライダーにパララックスを適用することのできるプラグインです。

定番のスライダーを使ったデザインも、パララックスを用いれば新鮮なデザインに変身させることができますね。

jQuery Cool Kitten Plugin

jQuery Cool Kitten Pluginはレスポンシブデザインに対応したパララックスを実装できるプラグインです。今後のWebサイトはモバイル端末での表示最適化が必須と見られているので、レスポンシブと相性のいいプラグインはうれしいですね。

まとめ

パララックスは色々なデザイン手法と組み合わせることができ、使い方次第でページのクオリティが大きく高まります。

パララックスの参考になるサイトなどはこちらにまとめました。

今後はスマホ向けページでもパララックスを使ったページが増え、注目されるサイトが増えてくるのではないでしょうか。

パララックスはWebデザインの基本中の基本です。プラグインを使いこなして、Webサイト制作に活かしてみてください。

おすすめの記事