JavaScriptライブラリRellax.jsの使い方を解説！簡単にパララックスを実装しよう！

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

パララックスは、一から実装すると面倒ですが、ライブラリを使用することで簡単に実装することが出来ます。

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

JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。

JavaScriptの勉強ができるおすすめの本やサイト紹介！

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

Rellax.jsとは

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

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

Rellax.jsの公式サイトでパララックス効果がたくさん使われているので、確認してみてください。

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

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

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

メリット

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

これらのメリットを紹介します。

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

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

💡 デザインの幅が広がる

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

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

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

デメリット

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

これらのデメリットを紹介します。

💡 サイトが重くなりやすい

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

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

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

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

Rellax.jsの使い方

1. Rellaxのファイルを読み込む
2. HTMLを記述する
3. JavaScriptを記述する

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

Step1：Rellaxのファイルを読み込む

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

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

• rellax-master > rellax.min.js

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

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

defer属性をつけているので、head内で読み込んでしまって大丈夫です。

ご自身の環境によってパスは変えてください。

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

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

Step2：HTMLを記述する

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

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

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

また、オプションが用意いて、スピードや位置、重なり順などを指定することが可能です。

Step3：JavaScriptを記述する

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

JavaScripは最低限これだけで動きます。Rellaxを使う宣言だと思ってもらえれば良いです。前述した通り、js-rellaxの部分は自由に決めることができます。

Rellax.jsのオプションや機能を詳しく紹介

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

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

<div class="js-rellax" data-rellax-speed="-3" data-rellax-zindex="2" data-rellax-percentage="0.5">SAMPLE</div>

複数設定する場合、上のように記述します。

それぞれの属性について紹介します。

💡 data-rellax-speed

rellax要素のスピードを操作する属性です。-10 ~ 10 の数値が設定可能で、値が大きいほど速くなります。マイナスで下方向へ、プラスで上方向へ移動します。

💡 data-rellax-zindex

重なり順を指定する属性です。CSSのz-index同様、値が大きいほど上になります。

💡 data-rellax-percentage

要素の位置をパーセンテージで設定する属性です。マイナスで下方向へ、プラスで上方向へ配置されます。デフォルト値の公式解説はありませんが、だいたい-0.12 あたりがデフォルトで設定されています。

例えば、パララックス要素をウィンドウ中央で揃えたい場合、data-rellax-percentage=”0.5″とします。

オプション一覧

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

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

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

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

その他の設定

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

上のコードは、スクロールすると、positionにX,Y座標が入ります。

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

Rellax.jsの使用例を紹介

使用例を3つ紹介を紹介します。

サンプル1

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

💡 HTML

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

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

💡 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;
}

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

スタイルを整えているだけで、特別な記述はありません。

💡 JavaScript

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

JavaScript 側では、オプションとしてcenter:trueを指定します。

サンプル2

指定のrellax要素のみスピードを変えます。rellax.jsを使用する上で、よくやる動きです。

💡 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テキストはdata-rellax-speed=”1″

上のように指定します。これで、Sampleテキストだけ速く動きます。

💡 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;
  }
}

スタイルを整えているだけで、特別な記述はありません。

💡 JavaScript

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

サンプル1と同様center:trueを指定します。

サンプル3

CSSのbackground-attachment: fixedと組み合わせたサンプルを紹介します。

💡 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

.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

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

今まで同様にcenter:trueを指定します。

まとめと参考記事

パララックスを実装できるJavaScriptライブラリ、Rellax.jsを紹介しました。

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

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

【超簡単】JavaScriptライブラリaos.jsの使い方を解説！ masonry.jsの使い方を解説！Pinterest風グリッドレイアウトを簡単実装！ Block Reveal Effectsの使い方を紹介！2段階アニメーションを実装しよう！

独学に限界を感じていませんか？