Rellax.jsの使い方 - テキストも画像もパララックスできるプラグイン
今回はテキストも画像もパララックスできるRellax.jsの使い方を紹介します。jQueryに依存しないで使えるプラグインですが、今回はjQueryを使用して説明します。
まずはデモサイトを作ったので動作を確認しましょう。
テキストも画像もパララックスできるRellax.jsの使い方
以前に紹介したパララックスできるプラグインのparallax.jsは画像に特化したプラグインです。テキストはパララックスできません。背景の画像をずらすことでパララックスさせています。
Rellax.jsはスクロールに応じて、テキストや画像の位置を移動させることでパララックスさせています。
両者の違いはデモサイトで確認してもらえるとわかりやすいでしょう。
それではRellax.jsの使い方を説明していきます。
Rellax.jsをダウンロードする
まずはRellax.jsをgithubからダウンロードしましょう。
フォルダを解凍して「rellax.min.js」をご自身の環境にアップロードしてください。
アップロードできたらファイルを読み込みます。読み込むパスはご自身の環境に合わせて変更します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/rellax.min.js"></script>
githubからダウンロードをするのが手間であればCDNも用意されています。以下のように書けばダウンロードせずにRellax.jsを使うことができます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js"></script>
jQueryに書くこと
メモ帳などでinit.jsと作成して以下のよう書きましょう。クラス名がrellax-targetとついているものにパララックス効果をつけるようにします。
$(function(){
var rellax = new Rellax('.rellax-target'); //クラス名rellax-targetにパララックス効果
});
作成したinit.jsを読み込みます。先ほど読み込んだものと合わせると以下のようになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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）
スマホ表示も考えた実装方法とは？
スマホでは画面サイズが変わるため、パソコンではうまく見えていたものが、スマホで位置がズレていたり、パララックスのスピードが早くなってしまうことがあります。
この場合の実装方法は以下の２つがあります。
①スマホでも数値を調整して、パララックスさせたい
②スマホ表示ではパララックスさせない
それぞれ説明していきます。
スマホでも数値を調整して、パララックスさせる
数値の変更ができるようにスピードはjQueryで、位置はCSSで調整します。
jQueryに書くこと
画面サイズを判定して、スマホ表示のときはパララックスのスピードを遅くします。
$(function(){
var iwW = $(window).innerWidth(); //画面のサイズを測る
if ( iwW >= 769 ) { //画面サイズが769px以上なら
var rellax = new Rellax('.rellax-target', {
speed: 1 //速度
});
}else{ //768px以下なら
var rellax = new Rellax('.rellax-target', {
speed: 0.7 //速度
});
}
});
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を読み込ませないようにします。
jQueryに書くこと
//ユーザーエージェントでスマホとタブレットを判定
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-speed="1" data-rellax-percentage="0.5" data-rellax-zindex="2">テストです</p>
</div>
Windowsで見たときのガタつきを解消するには？
Macで見るパララックスはスクロールに余韻（慣性スクロール）があるためとても自然ですが、Windowsの場合はスクロールした分しか進まないためパララックスがガタつく場合があります。
このガタつきを解消ためには、Macと同じようにマウススクロールに余韻をつけてあげることです。以前の記事でやり方を説明しているので参考にしてみてください。
