🎉 お知らせ:サイト名が『webkore』から『模写修行 media』に変更になりました。6月以降にドメインも『moshashugyo.com/media/』へ変更する予定です。

JavaScript

JavaScriptプラグインRellax.jsの使い方を解説!簡単にパララックスを実装しよう!

Author:Jyu

この記事の目次

クライアントワークでweb制作をやっていると、”パララックスを導入してほしい” といった要望がたまにあります。

パララックスは、一から実装すると面倒だったりしますが、多くのプラグインが存在し、それらを使用することで簡単に実装することが出来ます。

この記事では、簡単にパララックスを実装できるJavaScriptプラグイン、Rellax.jsを紹介します。

Rellaxとは

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

パララックスとは、視覚効果のことで、ここではスクロールに応じて要素の動きやスピードを操作する、立体感・奥行きを演出することを指します。

Rellax.jsの公式サイトでたくさん使われているので、見てみてください。

公式サイト

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

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

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

メリット

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

見せたいものをピンポイントで見せられる

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

デザインの幅が広がる

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

ストーリー性を持たせることができる

スクロールに応じて、表示要素に変化を与えることが可能となり、工夫次第では順を追っての「説明や表示」などに効果を発揮します。

デメリット

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

サイトが重くなりやすい

JavaScriptを使って実装するので、多少サイトが重くなります。また、たくさんの要素にパララックスを仕様するとブラウザに負荷もかかります。普通の使い方をする分には問題になりません。

パララックスはサイトを選ぶ

パララックスはサイトを選びます。マッチすれば効果を得られますが、そうでないとただ鬱陶しいだけの演出になる可能性もあります。例えば、情報サイトなど、何らかの情報を伝えることがメインとなるサイトには向きません。

Rellax.jsの使い方

  1. プラグインファイルを読み込む
  2. HTMLを記述する
  3. JavaScriptを記述する

まずはこれらの順に、簡単に使い方を解説します。

プラグインファイルを読み込む

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

ダウンロードは、Rellax.jsのGitHubから行います。「Clone or Download」 → 「Download ZIP」をクリックすると、「rellax-master.zip」がダウンロードされます。

GitHub
  • rellax-master/rellax.min.js

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

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

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

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

こちらからCDNを利用することもできます。バージョンが変わってる場合もあるので、ご自身で公式サイトも確認してみてください。

HTMLを記述する

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

こちらは画像にパララックスを指定する例です。基本的な使い方としては、このようにパララックスさせたい要素にクラスを指定し、終了となります。

今回の例では、js-rellaxにしていますが、このクラス名は自由に決めることができます。(次で説明しています)

また、Rellax.jsにはオプションが用意いて、デフォルト動作にスピードや位置、重なり順などを指定することが可能となります。

JavaScriptを記述する

javascript
var rellax = new Rellax('.js-rellax');

これだけで使用が可能になります。「HTMLを記述する」でも説明しましたが、js-rellaxの部分は自由に決めることができます。

Rellax.jsのオプションや機能を詳しく見てみよう!

  • スピード
  • 重なり順
  • 位置

Rellax.jsでは、これらの3つの属性が用意されいます。

html
<div class="js-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
javascript
var rellax = new Rellax('.js-rellax', {
  speed: -2,
  center: false,
  wrapper: null,
  round: true,
  vertical: true,
  horizontal: false
});

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

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

その他の設定

設定値 内容
refresh() 設定をリセット
destroy() Rellaxを終了し、元の位置にリセット
callback X,Y座標取得
javascript
var rellax = new Rellax('.rellax-position', {
  callback: function(positions) {
   console.log(positions);
  }
});

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

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

Rellax.jsの使用例を紹介

サンプル1

まずはDEMO1をご覧ください。


HTML

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

要素に対して、「js-rellaxクラス」とdata-rellax-speed="1"を指定しました。


CSS

css
.sample01{
  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;
}

.sample01 .title{
  color: #fff;
  font-size: 26px;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .sample01{
    width: 800px;
  }

  .sample01 .title{
    font-size: 40px;
  }
}

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


JavaScript

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

JavaScript側では、オプションとしてcenter:trueを指定します。全rellax要素ではなく、個別に指定したい場合は、JavaScript側ではなく、data-rellax-percentage=”0.5をHTML側で指定してください。

サンプル2

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


HTML

html
<div class="sample02">
  <div class="top">
    <p class="sample-txt js-rellax" data-rellax-speed="1">Sample</p>
    <div class="js-rellax img" data-rellax-speed="0.2">
      <img src="img/rellax-sample2.jpg" alt="">
    </div>
  </div>
  <div class="bottom js-rellax" data-rellax-speed="0.2" >
    <div>
      <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要素に「js-rellaxクラス」と「data-rellax-speed属性」を指定します。テキスト群と画像は同じスピードでパララックスさせたいので、data-rellax-speed=”0.2″、Sampleテキストは上記2要素よりスピードを速めたいので、data-rellax-speed=”1″を指定します。


CSS

css
.sample02 .top{
  position: relative;
  margin-bottom: 10px;
}

.sample02 .sample-txt{
  color: #aaa;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 1px;
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 10;
}

.sample02 .sample-txt span{
  color: #aaa;
  font-size: 50px;
  font-weight: bold;
}

.sample02 .top .img{
  display: block;
  width: 80%;
  margin-left: auto;
  position: relative;
  z-index: 0;
}

.sample02 .bottom .title{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.sample02 .bottom .text{
  max-width: 400px;
  text-align: center;
  padding: 0 10px;
  margin: 0 auto 20px;
}

.sample02 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) {
  .sample02{
    min-width: 1000px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row-reverse;
    margin-left: auto;
  }

  .sample02 .top{
    width: 48%;
    margin-left: auto;
  }

  .sample02 .top .img{
    width: 100%;
  }

  .sample02 .sample-txt{
    font-size: 90px;
    position: absolute;
    top: 33%;
    left: -20%;
    transform: translateY(-50%);
  }

  .sample02 .sample-txt span{
    font-size: 110px;
  }

  .sample02 .bottom{
    width: 38%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 5%;
  }

  .sample02 .bottom .title{
    font-size: 45px;
  }

  .sample02 .bottom .text{
    font-size: 18px;
  }

  .sample02 a{
    width: 220px;
    padding: 6px 0;
  }
}

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


JavaScript

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

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

サンプル3

CSSのbackground-attachment: fixedと組み合わせて実装します。 とても簡単なので安心してくださいね!


HTML

html
<div class="sample03">
  <div class="contents">
    <div class="js-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="js-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="js-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つ書いてあるだけですね!


CSS

css
.sample03 .contents{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.sample03 .contents:nth-of-type(1){
  background-image: url(../img/rellax-sample3.jpg);
}

.sample03 .contents:nth-of-type(2){
  background-image: url(../img/rellax-sample4.jpg);
}

.sample03 .contents:nth-of-type(3){
  background-image: url(../img/rellax-sample5.jpg);
}

.sample03 .title{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.sample03 .text{
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 20px;
}

.sample03 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) {
  .sample03 .title{
    font-size: 50px;
    margin-bottom: 20px;
  }

  .sample03 .text{
    font-size: 18px;
  }

  .sample03 a{
    width: 220px;
    padding: 6px 0;
  }
}

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


JavaScript

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

JavaScriptの説明はもういらないですね! 難しく思われがちなパララックスもrellax.jsを使用することで、こんなにも簡単に実装できてしまうんです! みなさん是非、お試しください!!

まとめ

今回は簡単にパララックスを実装できるJavaScriptプラグイン、Rellax.jsを紹介しました。

Rellax.jsを使用することで、簡単にパララックス効果を演出できるので、ぜひ使ってみてください。

Rellax.js以外にも簡単に導入できるアニメーション系のプラグインを紹介しているので、そちらも参考にしてみてください。

駆け出しエンジニアのためのコーディング練習教材

Coming Soon
© 2021 模写修行 media.