【パララックスとは？】 Rellax.jsの使い方！
私たちの社名にも使われている「パララックス」。英語では「parallax」といい、視差効果という意味があります。IT業界では、webデザインで2012年頃から用いられるようになり、今では多くのサイトがこのパララックスを採用しています！
今回はこのパララックス効果をみなさんにご紹介したいと思います！
パララックスとは？
パララックスは、元々は写真用語で実際に撮った写真とカメラのファインダー内の像とがずれて写る現象のことを言います。
webデザインに用いられるパララックスも、「サイトを構成するパーツごとに動くスピードや向きをずらすスクロール効果」のことを言い、パララックスを用いることで、サイトに奥行きがでて、視差効果を楽しみながらスクロールすることができます。
この他にもパララックスを使うことで、以下のメリットがあると言われています。
- 見せたいものをピンポイントで見せることができる
- デザインの幅が広がる
- ストーリー性を持たせることができる
- ユーザーの離脱を抑える
簡単に導入できてこんなにメリットがあるなら、使わない手はないですね。
パララックスの使い方
皆さんもお気づきだと思いますが、本サイトにももちろんパララックスが使われています。
サイトにパララックス効果を実装する方法は、cssやjsライブラリ、jQueryなど様々ですが、今回は、本サイトで用いられているjsライブラリを使った実装をサクッとご紹介していきます！
パララックスを実装するためのプラグイン
パララックスをwebサイトに取り入れるためのプラグインやライブラリはいっぱいあります。それぞれのプラグインの特徴を踏まえて、自身のサイトに合うものを選びましょう！
ちなみに、本サイトでは、その中から「rellax.js」を採用しています。rellax.jsはjQueryに依存しないで、ファイルを読み込み、JavaScript数行、HTML要素にクラスと属性を指定するだけで、簡単にパララックスを実装することができるんです。また、JavaScriptファイルも4KBとかなり軽量です。
step:1 Javascriptファイルをhtml内で読み込む
まずは、htmlファイルでrellax.jsが使えるようにします。下記のRellax.jsのGitHubからzipファイルをダウンロードします。
<script src="rellax.min.js"></script>Rellax-master/relax.min.jsを自分の環境に合わせて配置して、そのパスをhtmlファイルのbody閉じタグの前で読み込んで完了です。これだけ！
step:2 パララックスさせる要素のクラスに“rellax”を追加
<div class="rellax">
I'm that default chill speed of "-2"
</div>要素のクラスに「rellax」を指定するだけで、その要素にパララックス効果を付与することができます。まらそのhtml要素に「Rellax.js」で用意されているオプションを設定することで、パララックスの詳細を個別に設定することもできます。
以下には、「Rellax.js」で設定できるオプションを説明しています！
属性オプション
<div class="rellax" data-rellax-speed="7" data-rellax-percentage="0.5" data-rellax-zindex="5">Rellax.jsでは、要素の属性内で、「スピード」、「重なり順」、「位置」を設定することができます。
・data-rellax-speed:
Rellax要素のスピードを設定します。-10~10までの値を設定することができ、プラスは上方向、マイナスの値は下方向へ移動します。値が大きいほど、移動速度は速くなります。
・data-rellax-zindex:
重なり順を設定します。Cssのz-indexと同様に値が大きいほど上になります。
・data-rellax-percentage:
要素の位置をパーセンテージで設定します。マイナスで下方向に、プラスで上方向に配置します。要素をウィンドウの中央で任意の位置に配置する際は、値を0.5にすることセンタリングすることができます。
Javascript側のオプション
<script>
// Also can pass in optional settings block
var rellax = new Rellax('.rellax', {
speed: -2,
center: false,
wrapper: null,
vertical: true,
horizontal: false
});
</script>relax.jsでは、オプションはJavaScript側でオブジェクトとして設定できます。
・speed:
要素のスピードを設定できます。-10~10まで設定でき、プラスは上方向、マイナスは下方向へ移動します。
・center:
falseかtrueの値を設定できます。trueにすると、data-rellax-percentage=”0.5”と同じ効果になります。trueに設定しても、個別にdata-rellax-percentageを設定することで、任意の位置に配置することができます。
・wrapper:
監視領域を設定できます。初期値はbodyに設定されているので、bodyのスクロールに合わせてパララックス要素が動きます。このプロパティで他の要素を指定すると、その要素の監視するようになります。
・horizontal:
デフォルトでは、falseになっています。ウェブサイトを垂直でなく水平にスクロールする際に使用します。注意点として、horizontalをtrueにする場合はもう一つのverticalプロパティをfalseにする必要があります。
・vertical:
horizontalプロパティの垂直バージョンです。デフォルトではtrueになっています。自身の設計するサイトのスクロール方向に合わせて、horizontalと一緒に適宜設定しましょう。
その他オプション
・breakpoints:
relax.jsでは、3つのブレイクポイントを指定することができます。モバイル・タブレット・デスクトップのそれぞれの解像度を指定することで、要素に設定したそれぞれの速度が適応されます。
<script>
// This is the default setting
var rellax = new Rellax('.rellax', {
breakpoints: [576, 768, 1201]
});
</script>・destroy():
rellax.jsを終了し、パララックスの要素を元の位置にリセットします。
・refresh():
rellax.jsの設定をリセットします。
・callback:
スクール毎に指定したパララックス要素のX,Y座標を取得することができます。
<script>
// Start Rellax
var rellax = new Rellax('.rellax-blur-card', {
callback: function(positions) {
// callback every position change
console.log(positions);
}
});
</script>いっぱいありますね！
step:3 JavaScriptに記述
<script>
// Accepts any class name
var rellax = new Rellax('.rellax');
</script>この1行を自分のjavascriptファイルに追記するだけで、パララックスを実装することができちゃいます！すごく簡単ですよね！
パララックス効果を使うときの注意点
めちゃくちゃ簡単で便利なパララックスですが、無暗に使いすぎるのもよろしくありません。以下の項目に注意しましょう！
データ量の増加
パララックスサイトは基本縦長のサイト用いられます。パララックスを演出するために、1ページに多くの画像を埋め込んでしまうと、サイトのパフォーマンスが落ちてしまい、結果としてサイトが重くなってしまうこともあります。パララックスを使うときは、データ量とのバランスを気にしましょう！
可読性の低下
目に付きやすいパララックスですが、考えなしに何でもパララックス要素にすると、かえって見づらいサイトになってしまいます。大事なのは「緩急」。自身のサイトでアピールしたい個所を限定することで、パララックスを最大限に活用することができます！
SEO効果が薄れてしまう可能性も・・・
パララックスを使うことで、サイトを縦長の完結型にした場合、サイト全体のページ数の減少から、リンク数も減ってしまいます。その結果、リンク数と、インデックス数によるSEO効果が薄れてしまうことを認識しておきましょう。またこのような場合、ライティングの強化など、他箇所で補うことが大切になってきます。
まとめ
今回は、社名にもなっている「パララックス」をご紹介しました。パララックスを使うことで、サイトが一気にオシャレになります。しかし、デザインばかりに気を取られては本末転倒です！パララックスを使って、伝えたいことがより伝わるようなデザインを共に目指しましょう！
また一番最初のブログであまり要領も掴んでおらず、大変読みにくいブログとなっておりますが、これからちょくちょく更新していきますので、よろしくお願いします。
intern
