簡単にパッラックスが実装できるJavaScriptプラグイン【Rellax.js】の使い方を解説

2019-06-11
Writing by Jyu

Web制作を行っていると、”パララックスを導入してほしい” といった要望がよくあります。

 

パララックスブームの全盛期は過ぎたものの、現在でもパララックスの需要はまだまだあるなと感じます。サイト内の数ある要素の中で、指定のものをピンポイントで見せたり、デザインの幅を広げるにはどうすればいいか悩んだことがある方も多いと思います。方法は様々ですが、パララックス (視覚効果) を使用し、動きやスピードを操作するといった手法がよく見られます。

 

パララックスは、一から実装すると大変だったりもするのですが、現在では多くのプラグインが存在し、それらを使用することでJavaScriptの記述を抑えることが可能になります。今回は、簡単にパララックスを実装できるJavaScriptプラグイン、Rellax.jsを紹介します。

TOPICS

Rellaxって?

Rellax.jsとは、パララックスを簡単に実装できるJavaScriptプラグインです。

 

パララックスとは、視覚効果のことで、ここではスクロールに応じて要素の動きやスピードを操作する、立体感・奥行きを演出することを指します。こちらのRellax.js公式サイトにてスクロールし、ご確認ください。

 

Rellax.jsは、ファイルを読み込み、JavaScript数行、HTML要素にクラスと属性を指定するだけで、簡単にパララックスを実装することができます。また、JavaScriptファイルも4KBとかなり軽量なプラグインです。

パララックスを使うメリット、デメリット

パララックスを使用する際のメリット、デメリットについて紹介します。

 

パララックスのメリット、デメリットは表裏一体なところがあります。上手く使えばメリットとなり、誤った使い方をするとデメリットとなってしまします。使用箇所は慎重に選定することをおすすめします。

メリット

  • 見せたいものをピンポイントで見せられる
  • デザインの幅が広がる
  • ストーリー性を持たせることができる
  • ユーザーの離脱を抑える

 

見せたいものをピンポイントで見せられる
動きやスピードを操作することで、他要素との差別化が可能となり、ユーザーに見せたいものをピンポイントで見せやすくなります。

 

デザインの幅が広がる
パララックスは、デザイン性の高いサイトに取り入れられることが多いです。パララックスを使用することで、様々なデザインを表現することが可能となり、デザインの幅を広げるとともに、インパクトを与えることができます。

 

ストーリー性を持たせることができる
スクロールに応じて、表示要素に変化を与えることが可能となり、順を追っての「説明や表示」などに効果を発揮します。またストーリー性を持たせることで、能動的にスクロールさせることができ、ユーザーの離脱を防ぐことも可能となります。

 

ユーザーの離脱を抑える
上記でも解説した通り、「飽きずに能動的にスクロールさせる」コンテンツを制作することが可能となります。離脱率の高い、「情報量が多く、縦に長いサイト」に「楽しさ」を演出することで、離脱を防ぎ、しっかりと閲覧してもえる可能性が上がります。

デメリット

  • サイトが重くなりやすい
  • パララックスはサイトを選ぶ
  • SEO

 

サイトが重くなりやすい
メリットで、「縦に長い」サイトに有効と解説しましたが、逆にパララックスを使用することで、「縦に長い」サイトになってしまうこともあります。パララックスを使用することで、多くの情報を1ページ内に収めることが可能となり、画像や動画を詰め込みすぎ、結果としてパフォーマンスの低下を招いてしまうことがあります。パララックスを使用する際は、情報量の見極めが大切になってきます。

 

パララックスはサイトを選ぶ
パララックスはサイトを選びます。マッチすれば効果を得られますが、そうでないと離脱の原因にもなります。情報サイトなど、何らかの情報を伝えることがメインとなるサイトでは、パララックスを多用すると、ユーザーが本来見たい情報や見せたい情報を見つけづらくなってしまい、離脱されてしまう可能性が上がります。

 

SEO
パララックスを使用し、1ページ完結型のサイトを制作することがあります。1ページ完結型ということは、その分ページ数が減ります。ページ数が減るとリンク数も自ずと減少し、結果としてリンク数、インデックス数からSEO効果が薄れてしまうことがあります。このような場合、ライティングの強化など、他箇所で補うことが大切になってきます。

Rellax.jsの使い方

基本的な使い方は、

  1. 指定のJavaScriptファイルをHTML内で読み込む
  2. パララックスさせたいHTML要素に「rellax」クラスを指定する
  3. JavaScriptを数行記述する

となります。

 

では、順番に見ていきましょう。

指定のJavaScriptファイルをHTML内で読み込む

はじめに、HTML内で読み込むJavaScriptファイルをダウンロードします。

ダウンロードは、Rellax.jsの「GitHub」から行います。

「Clone or Download」 → 「Download ZIP」をクリックすると、「rellax-master.zip」がダウンロードされます。

 

「rellax-master.zip」は以下の構成となっております。

rellax-master directory

  • rellax-master/rellax.min.js

 

こちらのJavaScriptファイルが、HTML内で読み込むファイルとなります。

ご自身の環境に合わせパスを変更し、bodyの閉じタグ直前にて読み込み、終了となります。

 

<script src="js/rellax.min.js"></script>

 

またCDNでの読み込みも可能です。

コードは、「cdnjs」から取得できます。

以下head内にて読み込み完了となります。

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js"></script>

パララックスさせたいHTML要素に「rellax」クラスを指定する

基本的な使い方としては、以下のようにパララックスさせたい要素に「rellax」クラスを指定し、終了となります。また、Rellax.jsにはオプションが用意されており、それらを指定することで、デフォルト動作にスピードや位置、重なり順などを指定することが可能となります。オプションについては、次項の「実際にRellax.jsを使ってみる」にて解説していきたいと思います。

 

<img src="img/sample.png" alt="sample-img" class="rellax">

JavaScriptを数行記述

以下コードを自身のJavaScriptファイルに記述し終了となります。

 

var rellax = new Rellax(' .rellax ');

 

たったこれだけで基本的なパララックスの実装ができてしまうんです!とても簡単ですよね!

実際にRellax.jsを使ってみる

それでは実際に使ってみましょう。

属性一覧

Rellax.jsでは、3つの属性が用意されており、「スピード、重なり順、位置」を指定することが可能となります。複数設定する場合、以下のように記述します。

 

<div class="rellax" data-rellax-speed="-3" data-rellax-zindex="2" data-rellax-percentage="0.5">SAMPLE</div>
属性名 属性内容 デフォルト値
data-rellax-speed スピード ( -10 ~ 10 ) -2
data-rellax-zindex 重なり順
data-rellax-percentage 位置 公式解説なし

 

data-rellax-speed
data-rellax-speedは、rellax要素のスピードを操作する属性です。

-10 ~ 10の数値が設定可能で、値が大きいほど早くなります。
マイナスで下方向へ、プラスで上方向へ移動します。

 

data-rellax-zindex
data-rellax-zindexは、重なり順を指定します。
CSSのz-index同様、値が大きいほど上になります。

 

data-rellax-percentage
data-rellax-percentageは、要素の位置をパーセンテージで設定します。

マイナスで下方向へ、プラスで上方向へ配置されます。
デフォルト値の公式解説はないですが、だいたい -0.12 あたりがデフォルトで設定されています。実装していると、パララックス要素をウィンドウ中央で揃えたい場合が出てきます。その場合、data-rellax-percentage=”0.5″とすることで、センタリングを行うことができます。

オプション一覧

オプションを指定することで、より細かな設定を加えることが可能になります。

オプション名 オプション内容 デフォルト値
speed スピード ( -10 ~ 10 ) -2
center センタリング false
wrapper 監視領域 null (body)
round 公式解説なし 公式解説なし
vertical Y方向パララックス true
horizontal X方向パララックス false

rellax.jsでは、オプションはJavaScript側でオブジェクトとして一括指定します。以下コードでは、rellax要素全てに指定したオプションが設定されます。

 

var rellax = new Rellax('.rellax', {
  speed: -2,
  center: false,
  wrapper: null,
  round: true,
  vertical: true,
  horizontal: false
});

 

center
center:trueとすると、センタリングが可能となります。
このセンタリングは、data-rellax-percentage=”0.5″と同じ役割を果たします。

全rellax要素に対して適応させる場合は、JavaScript側にてcenterを指定し、
個別で適応させる場合は、data-rellax-percentage=”0.5″を属性として指定します。

その他の設定

設定値 内容
refresh() 設定をリセット
destroy() Rellaxを終了し、元の位置にリセット
callback X,Y座標取得

 

callback
以下のように記述することで、スクロール毎にpositionにX,Y座標が入ります。

var rellax = new Rellax('.rellax-position', {
  callback: function(positions) {
   console.log(positions);
  }
});

 

デバイスの指定
rellax.jsでは、デバイスを指定するオプションが用意されていません。従って、「spのみ無効」などとする場合は、ご自身でカスタマイズする必要があります。

デモ

実際にデモを複数作成いたしましたので、簡単に解説していきたいと思います。

 

デモ1

デモ1で紹介するレイアウトは、シンプルにrellax要素をウィンドウ中心で揃えるレイアウトとなります。

DEMO1

 

では、コードを見ていきましょう。

 

<div class="sample1">
  <p class="title rellax" data-rellax-speed="1">SAMPLE TITTLE</p>
</div>

 

要素に対して、「rellaxクラス」と「data-rellax-speed=”3″」を指定します。

 

.sample1{
  width: 90%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/rellax-sample1.jpg) no-repeat center/cover;
  margin: 0 auto;
}
.sample1 .title{
  color: #fff;
  font-size: 26px;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .sample1{
    width: 800px;
  }
  .sample1 .title{
    font-size: 40px;
  }
}

 

CSSに関しては、特別な記述はありませんね!flexboxを使用し、テキストを上下左右中央に配置します。

 

var rellax = new Rellax('.rellax', {
  center: true,
});

 

JavaScript側では、オプションとして「center:true」を指定します。全rellax要素ではなく、個別に指定したい場合は、JavaScript側ではなく、「data-rellax-percentage=”0.5」をHTML側で指定してください。以上でデモ1の実装は終了となります。

 

デモ2

デモ2では、指定のrellax要素のみスピードを変えます。rellax.jsを使用する上で、最も頻出するレイアウトかと思います。ここでは、「Sampleテキスト」のスピードを他のrellax要素より速めます。

 

<div class="sample2">
  <div class="top">
    <p class="sample-txt rellax" data-rellax-speed="1">Sample</p>
    <div class="rellax img" data-rellax-speed="0.2">
      <img src="img/rellax-sample2.jpg" alt="">
    </div>
  </div>
  <div class="bottom rellax" data-rellax-speed="0.2" >
    <div class="">
      <p class="title">SAMPLE TITLE</p>
      <p class="text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
      <a href="#">view more</a>
    </div>
  </div>
</div>

 

HTML側では、対象のrellax要素に「rellaxクラス」と「data-rellax-speed属性」を指定します。テキスト群と画像は同じスピードでパララックスさせたいので、「data-rellax-speed=”0.2″」、Sampleテキストは上記2要素よりスピードを速めたいので、「data-rellax-speed=”1″」を指定します。

 

.sample2 .top{
  position: relative;
  margin-bottom: 10px;
}
.sample2 .sample-txt{
  color: #aaa;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 1px;
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 10;
}
.sample2 .sample-txt span{
  color: #aaa;
  font-size: 50px;
  font-weight: bold;
}
.sample2 .top .img{
  display: block;
  width: 80%;
  margin-left: auto;
  position: relative;
  z-index: 0;
}
.sample2 .bottom .title{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.sample2 .bottom .text{
  max-width: 400px;
  text-align: center;
  padding: 0 10px;
  margin: 0 auto 20px;
}
.sample2 a{
  display: block;
  color: #fff;
  background: #333;
  width: 200px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  padding: 3px 0;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .sample2{
    min-width: 1000px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row-reverse;
    margin-left: auto;
  }
  .sample2 .top{
    width: 48%;
    margin-left: auto;
  }
  .sample2 .top .img{
    width: 100%;
  }
  .sample2 .sample-txt{
    font-size: 90px;
    position: absolute;
    top: 33%;
    left: -20%;
    transform: translateY(-50%);
  }
  .sample2 .sample-txt span{
    font-size: 110px;
  }
  .sample2 .bottom{
    width: 38%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 5%;
  }
  .sample2 .bottom .title{
    font-size: 45px;
  }
  .sample2 .bottom .text{
    font-size: 18px;
  }
  .sample2 a{
    width: 220px;
    padding: 6px 0;
  }
}

 

CSSに関しては、通常通りレイアウトを組みます。解説は割愛させていただきます。

 

var rellax = new Rellax('.rellax', {
  center: true,
});

 

JavaScript側は、デモ1同様「center:true」を指定し、実装終了となります。

 

デモ3

デモ3のレイアウトは、CSSの「background-attachment: fixed」と組み合わせて実装します。とても簡単なので安心してくださいね!

 

<div class="sample3">
  <div class="contents">
    <div class="rellax" data-rellax-speed="4">
      <p class="title">SAMPLE TITTLE</p>
      <p class="text">text text text text text text text text text text<br>text text text text text text text text text<br>text text text text text text text text</p>
      <a href="#">view more</a>
    </div>
  </div>
  <div class="contents">
    <div class="rellax" data-rellax-speed="4">
      <p class="title">SAMPLE TITTLE</p>
      <p class="text">text text text text text text text text text text<br>text text text text text text text text text<br>text text text text text text text text</p>
      <a href="#">view more</a>
    </div>
  </div>
  <div class="contents">
    <div class="rellax" data-rellax-speed="4">
      <p class="title">SAMPLE TITTLE</p>
      <p class="text">text text text text text text text text text text<br>text text text text text text text text text<br>text text text text text text text text</p>
      <a href="#">view more</a>
    </div>
  </div>
</div>

 

HTMLは、同じコードが3つ書いてあるだけですね!

 

.sample3 .contents{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.sample3 .contents:nth-of-type(1){
  background-image: url(../img/rellax-sample3.jpg);
}
.sample3 .contents:nth-of-type(2){
  background-image: url(../img/rellax-sample4.jpg);
}
.sample3 .contents:nth-of-type(3){
  background-image: url(../img/rellax-sample5.jpg);
}
.sample3 .title{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.sample3 .text{
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 20px;
}
.sample3 a{
  background: rgba(255, 255, 255, 0.9);
  display: block;
  width: 200px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  padding: 3px 0;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .sample3 .title{
    font-size: 50px;
    margin-bottom: 20px;
  }
  .sample3 .text{
    font-size: 18px;
  }
  .sample3 a{
    width: 220px;
    padding: 6px 0;
  }
}

 

ズラーっと記述してありますが、やっていることはデモ1とほとんど同じで、テキスト群を上下左右中央に配置し、親要素に「background-attachment: fixed;」を指定しています。

 

var rellax = new Rellax('.rellax', {
  center: true,
});

 

JavaScriptの説明はもういらないですね!

以上でデモ3の実装が終了となります。難しく思われがちなパララックスもrellax.jsを使用することで、こんなにも簡単に実装できてしまうんです!

みなさん是非、お試しください!!

まとめ

今回は簡単にパララックスを実装できるJavaScriptプラグイン、Rellax.jsを紹介しました。Rellax.jsを使用することで、簡単にパララックス効果を演出でき、またサイトの差別化にも繋がるので、ぜひ使ってみてください。

参考URL

-公式サイト
https://dixonandmoe.com/rellax/

-Git hub
https://github.com/dixonandmoe/rellax