簡単にパララックスを実装できるRellax.JSの使い方

簡単にパララックスを実装できるRellax.JSの使い方

  • このエントリーをはてなブックマークに追加

以前にスマホ対応!パララックスサイトの作り方という記事でパララックスを実装できる「ScrollTween.js」というライブラリを当サイトで紹介していますが、今回はRellax.JSというライブラリの使い方をサクッと紹介したいと思います。

目次

Rellax.JSとは?

Rellax.JSは、jQueryに依存しないパララックスを実装できるためのJavaScriptライブラリです。

こちらからデモが見れます。
https://dixonandmoe.com/rellax/

Git Hub上の公式ページ。
https://github.com/dixonandmoe/rellax

Rellax.JSの導入

npmでのインストールはこちら。

npm install rellax --save

直のファイルはこちらからコピーして利用します。
https://github.com/dixonandmoe/rellax/blob/master/rellax.min.js

基本的な使い方

ポイント①

「class=”rellax”」のようにクラス名を入力します。また、「data-rellax-speed=”-5″」のようにカスタムデータ属性を記述することでスクロールのスピードを設定することができます。スピードは「-10 から 10」までの間でスピードを指定することができます。

ポイント②

Rellax.JSファイルの読み込みとポイント①で指定したclassを指定します。

<div class="bg">
    <!-- ポイント① -->
    <h1 class="rellax" data-rellax-speed="-5">SONICMOOV</h1>
    <h2 class="rellax" data-rellax-speed="-2">App Development</h2>
    <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2>
    <h2 class="rellax" data-rellax-speed="4">Programming</h2>
</div>

<!-- ポイント② -->
<script src="rellax.min.js"></script>
<script>
    var rellax = new Rellax('.rellax');
</script>

背景を視差スクロールする

下記のようにCSSに「background-attachment: fixed;」を指定すると背景そのものにもより視差スクロールを強調する設定にすることもできます。

<div class="bg rellax" data-rellax-speed="7">
    <h1 class="rellax" data-rellax-speed="-5">SONICMOOV</h1>
    <h2 class="rellax" data-rellax-speed="-2">App Development</h2>
    <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2>
    <h2 class="rellax" data-rellax-speed="4">Programming</h2>
</div>
<script src="rellax.min.js"></script>
<script>
    var rellax = new Rellax('.rellax');
</script>
.bg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 800px;
    background-image: url('img/bg.jpg');
    background-attachment: fixed;
}

Z-index

「data-rellax-zindex=”1″」のようにz-indexの重なり順を指定することもできます。

<div class="bg">
    <h1 class="rellax" data-rellax-zindex="1">SONICMOOV</h1>
    <h2 class="rellax" data-rellax-speed="-2" data-rellax-zindex="2">App Development</h2>
    <h2 class="rellax" data-rellax-speed="1" data-rellax-zindex="3">UI / UX Design</h2>
    <h2 class="rellax" data-rellax-speed="4" data-rellax-zindex="4">Programming</h2>
</div>

要素の位置情報を取得

要素の位置情報を取得して処理をさせることもできます。

<div class="bg" data-rellax-speed="7">
    <h1 class="rellax_postion" data-rellax-speed="-5">SONICMOOV</h1>
    <h2 class="rellax" data-rellax-speed="-2">App Development</h2>
    <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2>
    <h2 class="rellax" data-rellax-speed="4">Programming</h2>
</div>
<script>
    // 要素の位置情報を取得
    var rellax = new Rellax('.rellax_postion', {
    callback: function(positions) {
      // callback every position change
      console.log(positions);

      // 要素のY軸が-20より大きくなったら処理というサンプル
      if(positions.y > -20) {
          console.log("hoge = " + positions.y);
      }
    }
  });
</script>

関連記事

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep Hep!にてeizとして記事執筆中。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
Wantedly 採用情報はこちら

新着の記事

mautic is open source marketing automation