• 最終更新日:

【スマホ対応】手軽にパララックスできる!おすすめのjqueryプラグインはどれ?

パララックスができるjqueryプラグイン

パララックス効果を手軽に実装できるjqueryプラグインは多くあります。それゆえ数が多くてどれを選んだら良いか分からない人も少ないないはず。最近ではjqueryを使わなくてもcssでパララックス効果を実装できたりと、どの方法が一番良いか分かりずらいですよね。

パララックス実装に向けて理想的なのは以下の通り。

  • スマホとパソコンで、見え方を調整できる(スマホ対応)
  • パララックスのスピードを調整できる
  • スクロールしたときのガタつきが少ない
  • 導入するまでの手軽さ

※2019/1/29 追記
デモページを作ってみました。スマホではパララックス部分は固定される仕様になっています。スマホでもパララックス表示させたい方は他のプラグインを探したほうが良いでしょう。

デモページ

配布先ページ

スマホ対応のパララックスjqueryプラグインのおススメとは?

パララックス効果はスマホとの相性が良くありません。そこでスマホで見たときはパララックス効果を停止する機能があるjqueryプラグインは必須です。あとパララックスはスクロールスピードとズレることで効果を発揮するのでcssの実装もおススメしません。あとは何と言っても簡単に実装できるものがいいですよね。

結論から言うと「Parallax.js」がおススメです。とりあえず8つのプラグインを比較して選びました。

Parallax.jsの使い方

Parallax.jsをダウンロードして読み込みます。公式サイトでは以下のようになっていますね。jqueryフォルダへのパスは自分のサイトに合わせて変更してください。(ピンク色のところ)


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/parallax.js"></script>


 

つぎにパララックスを使いたい箇所に以下のコードを記入します。


<div class="parallax-window" data-parallax="scroll" data-speed="0.6" data-position="center top" data-image-src="./images/parallax01.jpg" data-natural-width="1600" data-natural-height="900"></div>


 

上のコードのポイントだけ説明します。

  • data-speed…0に近づくほどパララックス効果が大きくなります。1にすると画像が固定されます。
  • data-position…画像の位置を指定できます。今回はcenter topとしているので横軸は中央、縦軸はトップに指定しています。
  • data-natural-width…画像の実際の横幅をいれます。これによって読み込みのスピードアップやエラーを防ぐことができます。
  • data-natural-height…画像の実際の縦幅をいれます。
  • data-ios-fix…デフォルトはtrueでスマホでは画像は固定されます。data-ios-fix="false"にしてもスマホでパララックス表示するわけではない
  • data-android-fix…デフォルトはtrueでスマホでは画像は固定されます。data-ios-fix="false"にしてもスマホでパララックス表示するわけではない(画像が表示されなくなります)

最後にcssに以下のコードを記入すれば終わりです。


.parallax-window {
    min-height: 400px;
    background: transparent;
}

 

min-heightのところはお好みの数値を入れてください。これだけでパララックスを実装することができます。Parallax.jsをダウンロードしてしまえば、あとはパララックスを配置したい箇所にコピペでいけます。とっても手軽ですよね。

比較したパララックスができるjqueryプラグイン7個

今回のParallax.jsを見つけるまで多くのパララックスプラグインを検証したので参考までに載せておきます。

Nikebetterworld Parallax Effect(配布サイト

やれることも多いが手軽じゃない。スマホで見たときのパララックスの止めたりする指定を簡単に選べない。

Skrollr(配布サイト

やれることも多いが手軽じゃない。スマホで見たときのパララックスの止めたりする指定を簡単に選べない。

Cool Kitten(配布サイト

単純なパララックスを実装できるが初心者向けではない。Parallax.jsのほうが圧倒的に簡単。

jInvertScroll(配布サイト

下へのスクロールでサイトが横に動くもの。縦へのスクロールに慣れてる人にとって横スクロールは負担でしかないので却下。スマホ対応の記載は特になし。

Enllax.js(配布サイト

前景も背景もパララックスできるうえに横スクロールにも対応しているプラグイン。いろんなことができるうえに導入も簡単にできる。ただスマホ時の見え方を指定できない。あとこのプラグインだけではガタつきがひどいため、デフォルトでSmoothScroll.min.jsが使われている。

parlx.js(配布サイト

Parallax.jsと同じくらいシンプルに導入できるプラグイン。スマホにも対応している。ただパララックス効果が個人的にはイマイチだった。数値を調整しても満足できるパララックスを実装できなかったので却下。

RELLAX.js(配布サイト

多くの人から指示されているプラグイン。使っている人が多いため導入方法を説明しているブログが多いのも素晴らしい。画面いっぱいの広げた画像には向かないが、テキストや画像をパーツとしてパララックスさせるには向いている。。以下の記事にも書いたので参考にしてみてください。

 

もっと自然なパララックス効果を実現するためのヒント

macとwindowsではマウススクロールの動きに違いがあります。macのマウススクロールは少し余韻をもって動きますが、windowsはホイールした分しか動きません。そのためwindowsではパララックス効果をいまいち感じにくい人も多いはず

windowsでパララックスを自然に見せたいのであれば、macと同じようなマウススクロールにするのも1つの手です。jqueryを使えば簡単に実装できますし、wordpressを使ったサイトであればプラグインをインストールするだけで使えるものもあります。

実装する方法は以下の記事に書いたので参考にしてみてください。