【まとめ】パララックスを実装するためのプラグイン6選

こんにちは!

今回は、パララックスをサイトに実装するためのプラグイン・JSライブラリをご紹介したいと思います。パララックスを実装するためのプラグインやライブラリは数多くあり、今回はその中でも、導入が簡単で高機能なもの選びました。

ぜひ、自身のサイトにあうパララックスを検討する際の参考にしてみてください!

パララックスとは

パララックスは、元々は写真用語で実際に撮った写真とカメラのファインダー内の像とがずれて写る現象のことを言います。

webデザインに用いられるパララックスも、「サイトを構成するパーツごとに動くスピードや向きをずらすスクロール効果」のことを言い、パララックスを用いることで、サイトに奥行きがでて、視差効果を楽しみながらスクロールすることができます。

この他にもパララックスを使うことで、以下のメリットがあると言われています。

  • 見せたいものをピンポイントで見せることができる
  • デザインの幅が広がる
  • ストーリー性を持たせることができる
  • ユーザーの離脱を抑える

パララックスを実装するためのプラグイン6選

1. Rellax.js

「Rellax.js」はvanilla JS製のjQueryに依存しないJavaScriptパララックスライブラリで、ファイルを読み込み、JavaScript数行、HTML要素にクラスと属性を指定するだけで、簡単にパララックスを実装することができるんです。また、JavaScriptファイルも4KBとかなり軽量です。

Rellax.jsデモページ

GitHubダウンロードページ

simpleParallax.js

「simpleParallax.js」はvanilla JS製で、他フレームワークやライブラリに依存することはなく実装できます。非常に軽量で画像をパララックスの対象としており、余計なHTMLを書かなくていいのでシンプルな実装ができます。

simpleParallax.jsデモページ

GitHubダウンロードページ

3. Parallax.js

「Parallax.js」は、背景画像にパララックスを付け加えることができるとてもシンプルなプラグインです。こちらはjQueryのプラグインとして動作するため、Parallax.jsだけでなく忘れずにjQueryもインポートするようにしてください.

Parallax.jsデモページ

GitHubダウンロードページ

4. skrollr

こちらの「skrollr」は、jQueryのプラグインでスクロールで要素の移動や、色の変化、フェードイン・フェードアウトなど自由度はとても高いです。Javascriptのスキルは必要なく、HTMLとCSSだけで、高度なパララックスを実装することができます。

skrollrデモページ

GitHubダウンロードページ

5. Luxy.js

「Luxy.js」は自動で慣性スクロールがついて、パララックスの効果をより魅力的にすることができます。また日本の方が作られたライブラリで、日本語のドキュメントが多く、vanilla JS製でjQueryに依存しないので実装しやすいところもおすすめのポイントです。

Luxy.jsデモページ

GitHubダウンロードページ

6. ScrollMagic

「ScrollMagic」はスクロールに関する様々なアクションを制御できるプラグインです。もちろんパララックスもカバーしています!また、バージョンが更新されて、GSAP, VelocityJSなどのフレームワークと連携することで、アニメーションの選択しを増やすことができるようになりました。パララックスだけでなく、様々なスクロールアクションを実装したいときなどにおすすめです!

ScrollMagicデモページ

GitHubダウンロードページ

まとめ

パララックスを使うことで、サイトに遊び心を持たせることができ、ユーザーが飽きないWebページを作ることができます。

しかし、何も考慮せずに実装するとガタガタなパララックスになってしまし、却ってサイトの完成度が下がってしまいます。

自身のサイトにパララックスを実装する際は、どのプラグインが適切か考えてみましょう!それにしてもいっぱいありすぎて迷っちゃますよね。