Rellax.jsの使い方 - テキストも画像もパララックスできるプラグイン
今回はテキストも画像もパララックスできるRellax.jsの使い方を紹介します。jQueryに依存せずに使えるプラグインです。
※2020.03.19追記
jQueryを使わない書き方に修正しました。
テキストも画像もパララックスできるRellax.jsの使い方
Rellax.jsの特徴は画像だけではなく、テキストに対してパララックスできること。１つ１つに対してスピード、方向を調整できることができます。
それでは使い方を見ていきましょう。
Rellax.jsをダウンロードする
まずはRellax.jsをgithubからダウンロードしましょう。
フォルダを解凍して「rellax.min.js」をご自身の環境にアップロードしてください。
アップロードできたらファイルを読み込みます。読み込むパスはご自身の環境に合わせて変更します。
<script src="path/to/rellax.min.js"></script>githubからダウンロードをするのが手間であればCDNも用意されています。以下のように書けばダウンロードせずにRellax.jsを使うことができます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js"></script>JavaScriptで書くこと
メモ帳などでinit.jsと作成して以下のよう書きましょう。クラス名がrellax-targetとついているものにパララックス効果をつけるようにします。
var rellax = new Rellax('.rellax-target'); //クラス名rellax-targetにパララックス効果作成したinit.jsを読み込みます。先ほど読み込んだものと合わせると以下のようになります。
<script src="path/to/rellax.min.js"></script>
<script src="path/to/init.js"></script>HTMLに書くこと
パララックスさせたい箇所にクラス名rellax-targetをつけることが条件です。あとはdate属性でパララックスさせる方向やスピード、重なりを指定すれば終了です。
<div>
<p class="rellax-target" data-rellax-speed="1" data-rellax-percentage="0.5" data-rellax-zindex="2">テストです</p>
</div>data-rellax-speed
数値がを-10〜10から選べます。プラスは下スクロールすると上へ、マイナスは下スクロールすると下へ移動します。数値が大きいほどパララックス効果が強くスピードが早くなります。
data-rellax-zindex
テキストや画像の重なる順番を数値で決めます。数字が大きいと上に重なります。
data-rellax-percentage
上下のどの位置にセットするか決めます。マイナスで下へ、プラスで上に配置します。
スクロールを開始すると、パララックスを指定した要素はいっせいに動き出します。下にスクロースすればするほど、下にある要素は見えたい位置からズレてきてしまうので、ここで位置を調整する必要があります。（ここではなく、cssで調整してもOK）
スマホ表示も考えた実装方法とは？
スマホでは画面サイズが変わるため、パソコンではうまく見えていたものが、スマホで位置がズレていたり、パララックスのスピードが早くなってしまうことがあります。
この場合の実装方法は以下の２つがあります。
①スマホでも数値を調整して、パララックスさせたい
②スマホ表示ではパララックスさせない
それぞれ説明していきます。
スマホでも数値を調整して、パララックスさせる
数値の変更ができるようにスピードはJavaScriptで、位置はCSSで調整します。
JavaScriptで書くこと
画面サイズを判定して、スマホ表示のときはパララックスのスピードを遅くします。
document.addEventListener("DOMContentLoaded", function() {
//【768px以下】という条件を格納
var widthCheck = window.matchMedia("screen and (max-width: 768px)");
function checkBreakPoint(widthCheck) {
if (widthCheck.matches) { //768px以下なら
var rellax = new Rellax(".rellax-target", {
speed: 2 //速度遅め
});
} else { //769px以上なら
var rellax = new Rellax(".rellax-target", {
speed: 5 //速度早め
});
}
}
// ブレイクポイントの瞬間に発火
widthCheck.addListener(checkBreakPoint);
// 初回チェックで発火
checkBreakPoint(widthCheck);
});HTMLに書くこと
date属性で書くのは重なり順を決めるdata-rellax-zindexだけにします。
<div>
<p class="rellax-target" data-rellax-zindex="2">テストです</p>
</div>CSSに書くこと
mediaクエリを使ってブレイクポイントごとに上下の位置をmarginやpadding、またはpositonを使って決めていきます。レイアウトによっては１つ１つ調整していくので時間と手間がかかります。
次にパソコン表示だけパララックスさせる方法です。スマホ・タブレット表示のときだけrellax.jsを読み込ませないようにすれば実現できます。
スマホ表示ではパララックスさせない
スマホ表示の判定を画面サイズでしてもいいですが、今回はユーザーエージェントで判定して、スマホやタブレットで表示されたときはrellax.jsを読み込ませないようにします。
JavaScriptに書くこと
//ユーザーエージェントでスマホとタブレットを判定
var _ua = (function(u){
return {
Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
|| u.indexOf("ipad") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
|| u.indexOf("kindle") != -1
|| u.indexOf("silk") != -1
|| u.indexOf("playbook") != -1,
Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
|| u.indexOf("iphone") != -1
|| u.indexOf("ipod") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
|| u.indexOf("blackberry") != -1
}
})(window.navigator.userAgent.toLowerCase());
//スマホとタブレットではなかったら読み込む
if(!_ua.Mobile && !_ua.Tablet){
var rellax = new Rellax('.rellax-target', {
speed: 1
});
}HTMLで書くこと
スマホやタブレットでパララックスさせないのであれば、パソコン表示ではdata-rellax-percentageを使って上下の位置を調整します。rellax.jsが読み込まれなければ自然と元の位置に戻るため余計にCSSを書く必要がないからです。
<div>
<p class="rellax-target" data-rellax-percentage="0.5" data-rellax-zindex="2">テストです</p>
</div>IEで見たときのガタつきを解消するには？
Macで見るとパララックスはスクロールに余韻（慣性スクロール）があるためとても自然ですが、WindowsのIEの場合はスクロールした分しか進まないためパララックスがガタつく場合があります。
このガタつきを解消ためには、Macと同じようにマウススクロールに余韻をつけてあげることです。以前の記事でやり方を説明しているので参考にしてみてください。
