パララックスは、様々なWebサイトで取り入れられているデザイン手法で、ユーザーを楽しませたりサイトを魅力的に見せたりなど様々な効果を発揮します。
Webサイトでパララックスを実装するためのプラグインやライブラリは様々なものが公開されており、それらを利用することで初心者の方でも簡単にパララックスをWebサイト上で実現することができます。
今回は、パララックスをWebサイトに取り入れるためのプラグインやライブラリの中から、特に人気が高くおすすめのプラグイン・ライブラリをご紹介したいと思います。
INDEX
パララックス(視差効果)とは
パララックス(視差効果)とは、スクロールした時に背景だけスクロールの速度を変えたり、要素ごとに異なるスピードでスクロールさせるようなWebデザインの手法の1つです。
パララックスを導入しない場合と比べ、スクロールに変化や遊びを付けることができ、Webサイトにアクセスしてくれた人を楽しませたり、Webサイトを魅力的に見せることによってブランディングに活用するなど、様々なシーンで取り入れることができます。
パララックスを実装できるプラグイン
パララックスは基本的にJavaScriptやjQueryを使って実装していきます。JavaScriptと言われると苦手意識を感じてしまう人も多いかもしれませんが、便利なプラグインが多数公開されているので、目的に合ったプラグインを使えばあっという間に実装することができます。
パララックスを実装するためのプラグインの中から、特に人気が高く、おすすめのプラグインを厳選しました。下記を参考に適したプラグインを見つけてみてください。
1. Rellax.js
Rellax.jsは、jQueryに依存しないプラグインで、シンプルなパララックスを簡単に実装でき、初心者の方や手間をかけずにパララックスを実装したい場合にとてもおすすめのプラグインです。
Rellax.jsの使い方
Rellaxの使い方はとても簡単で、ちょっとした設定を行うだけでパララックスを導入することができます。
まずダウンロードサイトからファイルをダウンロードしてください。
ダウンロードしたら、HTMLのheadタグ内で下記のようにファイルを読み込みます。※ファイルを配置したパスを正しく選択してください。
|
1 |
<script src="/js/rellax.min.js"></script> |
次に、JavaScriptでRellax.jsを使ってパララックスを適用するクラス名を指定します。
|
1 2 3 |
<div class="rellax"> I’m slow and smooth </div> |
これだけで、要素にパララックスの演出を加えることができてしまいます。
さらに、下記のようにスクロールのスピードを指定することも可能です。
|
1 2 3 |
<div class="rellax" data-rellax-speed="-7"> I’m extra slow and smooth </div> |
他のプラグインやプラグインと比べると、とてもスマートにパララックスを追加することができ、ファイルも軽量なのでパフォーマンス面でも申し分ありません。
2. Parallax.js
Parallax.jsは、背景画像にパララックスを付け加えることができるとてもシンプルなプラグインです。
こちらはjQueryのプラグインとして動作するため、Parallax.jsだけでなく忘れずにjQueryもインポートするようにしてください。
Parallax.jsの使い方
まずはじめに、Parallax.js公式サイトからファイルをダウンロードしてください。
ファイルをダウンロードできたら、ファイルをプロジェクトに追加してheadタグ内で下記のように読み込みます。
|
1 |
<script src="/js/parallax.min.js"></script> |
Parallax.jsは、HTMLに直接記述する方法とJavaScriptに記述する方法の2種類の利用方法があります。
HTMLに直接記述する場合は、パララックスの効果を付け加えたい箇所で下記のように記述します。
|
1 |
<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div> |
JavaScriptに記述する場合は、下記のように指定します。
|
1 |
$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'}); |
これだけで簡単に背景画像にパララックスを適用することができ、初心者の方でも簡単に利用することができます。
3. ScrollMagic
ScrollMagicは様々なパララックスを実現できるjQueryのプラグインで、とても軽量でサクサク動くため、多くの人が利用していて人気のプラグインです。
背景画像やテキストはもちろん、スクロールに合わせて様々な要素のCSSプロパティを操作することができるので、使いこなすことができれば様々なパララックスの効果を取り入れたWebサイトを作ることができます。
公式サイトを見れば分かりますが、とても動作がスムーズなので、ユーザビリティを損なわずにパララックスをWebデザインに取り入れることができます。
下記のページでサンプルをチェックすることができるので、気になる方はどんなことができるのかチェックしてみてください。
4. skrollr
スクロールに合わせて要素を自由に動かしたり、背景色を変化させたり、要素を登場させたりなど、パララックスを使ったWebサイトを自由自在に実装することができるプラグインです。
こちらのサイトは日本語でskrollrの使い方が紹介されており、とても分かりやすく紹介されているのでぜひ参考にしてみてください。
5. SUPER SCROLL ORAMA
SUPER SCROLL ORAMAもScrollMagicのように自由自在にパララックスを作成できるプラグインです。
公式ページでは色々なパララックスの効果が施されており、ここまでできるのか！と驚かされます。
このプラグインは現在開発が中止されており、「代わりにScrollMagicを使ってね。」という記述が書いてあるため、これから実装する人はScrollMagicを使った方がいいでしょう。
”6. FadeThis
FadeThisはスクロールしたときに画像をふわっと表示させたり、画面外から登場させたりすることができるプラグインです。
スクロールした時に動いているとユーザーの注意を引きつけることができるので、特に見て欲しいものや押してほしいボタンなどにアニメーションを付けておくと、コンバージョン率のアップなどにつながりますね。
7. JINVERTSCROLL
JINVERTSCROLLは、横方向のスクロールを実装できるプラグインです。
ほとんどのWebサイトが縦スクロールを採用しているため、横スクロールを取り入れることによってWebサイトにオリジナリティが生まれ、印象に強く残るサイトを作ることができますね。
8. Parallax Content Slider
Parallax Content Sliderはスライダーにパララックスを適用することのできるプラグインです。
定番のスライダーを使ったデザインも、パララックスを用いれば新鮮なデザインに変身させることができますね。
まとめ
パララックスはユーザーを楽しませるだけでなく、サイトを魅力的に見せることができてブランディングにも効果を発揮します。
むやみにパララックスを使ってしまうと、ただただ使いづらいサイトになってしまいますが、背景画像にさりげなく使ったり、スクロール時のスクロールスピードをちょっとだけ変えたりなど、さりげなく使うことでより魅力的なサイトを作ることができます。
下記の記事でパララックスを上手に活用しているサイトをご紹介しているので、ぜひそちらを参考にしてご自身のWebデザインにパララックスを取り入れてみてください。
