【スマホ対応】手軽にパララックスできる！おすすめのjQueryプラグインはどれ？
パララックス効果を手軽に実装できるjQueryプラグインは多くあります。それゆえ数が多くてどれを選んだら良いか分からない人も少ないないはず。最近ではjQueryを使わなくてもcssでパララックス効果を実装できたりと、どの方法が一番良いか分かりずらいですよね。
パララックス実装に向けて理想的なのは以下の通り。
- スマホとパソコンで、見え方を調整できる（スマホ対応）
- パララックスのスピードを調整できる
- スクロールしたときのガタつきが少ない
- 導入するまでの手軽さ
スマホ対応のパララックスjQueryプラグインのおススメとは？
パララックス効果はスマホとの相性が良くありません。そこでスマホで見たときはパララックス効果を停止する機能があるjQueryプラグインは必須です。あとパララックスはスクロールスピードとズレることで効果を発揮するのでcssの実装もおススメしません。あとは何と言っても簡単に実装できるものがいいですよね。
結論から言うと「Parallax.js」がおススメです。とりあえず10つのプラグインを比較して選びました。
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をダウンロードしてしまえば、あとはパララックスを配置したい箇所にコピペでいけます。とっても手軽ですよね。
比較したパララックスができるJavaScriptプラグイン12個
今回のParallax.jsを見つけるまで多くのパララックスプラグインを検証したので参考までに載せておきます。jQueryを使わないで実装できるものも紹介しています。
Nikebetterworld Parallax Effect（配布サイト）
やれることも多いが手軽じゃない。スマホで見たときのパララックスの止めたりする指定を簡単に選べない。最終更新が８年前で古すぎる。
Skrollr（配布サイト）
やれることも多いが手軽じゃない。スマホで見たときのパララックスの止めたりする指定を簡単に選べない。最終更新が４年前で古い。
Cool Kitten（配布サイト）
単純なパララックスを実装できるが初心者向けではない。Parallax.jsのほうが圧倒的に簡単。最終更新が7年前で古い。
jInvertScroll（配布サイト）
下へのスクロールでサイトが横に動くもの。縦へのスクロールに慣れてる人にとって横スクロールは負担でしかないので却下。スマホ対応の記載は特になし。
Enllax.js（配布サイト）
前景も背景もパララックスできるうえに横スクロールにも対応しているプラグイン。いろんなことができるうえに導入も簡単にできる。ただスマホ時の見え方を指定できない。あとこのプラグインだけではガタつきがひどいため、デフォルトでSmoothScroll.min.jsが使われている。最終更新が４年前で古い。
parlx.js（配布サイト）
Parallax.jsと同じくらいシンプルに導入できるプラグイン。スマホにも対応している。ただパララックス効果が個人的にはイマイチだった。数値を調整しても満足できるパララックスを実装できなかったので却下。
RELLAX.js（配布サイト）
多くの人から指示されているプラグイン。使っている人が多いため導入方法を説明しているブログが多いのも素晴らしい。画面いっぱいの広げた画像には向かないが、テキストや画像をパーツとしてパララックスさせるには向いている。以下の記事にも書いたので参考にしてみてください。
basicScroll（配布サイト）
デクストップとスマホの両方に対応。jQueryに依存しないで単体で動く。複数の画像を重ねてパララックスさせたいときに使える。ただ、ネイティブのjavascriptが使えないと細かい設定は難しい。IE対応していないCSSカスタムプロパティを使用しているところも気になる。
simpleParallax（配布サイト）
縦にも横にもパララックスできるプラグイン。jQueryに依存しないで単体で動く。background-imageを使わず、imgでパララックス。更新も頻繁に行われていて安定している。polyfillを読み込ませることでie11の対応も可能。
Luxy.js（配布サイト）
自動で慣性スクロールがついてリッチなパララックスが実現できるプラグイン。日本のwillstyle.さんが作成したもの。使い方も日本語で書かれているので実装しやすい。
Universal Parallax（配布サイト）
CSS側でtransform-styleを使ってパララックスさせるもの。スマホでもパララックスできる。IE未対応だが、Edgeには対応。
parax-bg（配布サイト）
実装方法はHTML側で背景画像とパララックスの速度を指定するのみ。スマホにも対応。IEでは画像が固定される。
IE10、11のガタつきを抑えるには？
IEで画像をパララックスさせると強烈にガタつきます。原因はIE特有の「スムーズスクロール」がONなっていること。Javascriptで以下のようにかけばOFFに設定できます。スクロール全体の滑らかさは減りますが、ガタつきを抑えることができます。
// 利用ブラウザをIE10か11で判定する
if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./)) {
$('body').on("mousewheel", function (){
// スムーズスクロールをOFFに切り替える
event.preventDefault();
var wd = event.wheelDelta;
var csp = window.pageYOffset;
window.scrollTo(0, csp - wd);
});
}以下の記事を参考にさせてもらいました。
もっと自然なパララックス効果を実現するためのヒント
macの主要ブラウザとWindowsのIEを比べると、マウススクロールの滑らかさに違いがあります。IEは滑らかさが少ないためパララックス効果をいまいち感じにくい人も多いはず。
IEでもパララックスを自然に見せたいのであれば、macと同じようなマウススクロールにするのも１つの手です。jQueryを使えば簡単に実装できますし、wordpressを使ったサイトであればプラグインをインストールするだけで使えるものもあります。
実装する方法は以下の記事に書いたので参考にしてみてください。
