MENU CLOSE

Rellax.jsを使って
簡単パララックス

Rellax.js
Rellax.js

今回は簡単にパララックスを実装できる「Rellax.js」の使い方をメモ。
公式サイトはこちら

DEMO

簡単なデモを作りました。
Rellax.jsのDEMO

Rellax.jsを使う準備

まずはyarnでインストール

$ yarn add -D rellax

そして読み込みます。
僕はwebpackでバンドルして使いますが、そのまま読み込むのもCDN使うのもお好みで。
今回は使い方の説明なのでCDN(ver1.9.1)を読み込むことにします。
<body>の一番下に以下のタグを設置します

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

これでRellax.jsを使う準備が整いました。

Rellax.jsの実装

さっそく実装してみましょう。

まずはJSを書きます。先ほど読み込んだタグのすぐ下に追記します。

<script>
    var rellax = new Rellax('.js-rellax');
</script>

「.js-rellax」というclassのついた要素に対してRellax.jsを適用します。
とりあえず動かすだけならJSはこれだけでOK。

次にHTMLを書きます。

<div class="js-rellax">
<!--パララックスさせたい要素をここに書く-->
</div>

はい、できました!
たったこれだけでパララックス完成!簡単!

Rellax.js - 応用編 -

ここまでの工程ではDEMOのようにはなりません。
Rellax.jsには簡単にカスタマイズできる機能が備わっていますので、それを使っていきます。

まずスピードの調整。「data-rellax-speed」属性を付けて調整します。
何も指定しなければdefaultは-2になっているみたいです。公式のオススメは-10 から 10までの間とのこと。

<div class="js-rellax" data-rellax-speed="3"></div>

次にパーセンテージの調整は「data-rellax-percentage」属性。
0.5にすると画面中央センタリングできる模様。

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

スピードの値が正(+)の場合は、
数値を大きくすると下に、
小さくすると上に少しずらすことができます。
スピードの値が負(−)の場合は逆に
数値を大きくすると上に、
小さくすると下にずれます。

こちらに関しては文章からだと想像しにくいと思うので、実際に適用してみるとわかると思います。

あとRellax.jsを適用した要素同士の重なり順を「data-rellax-zindex」で指定できます。defaultは0です。

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

JSの方では引数にオプションを一括で指定できます。

<script>
    var rellax = new Rellax('.js-rellax', {
    speed: -2, //速度
    center: true, //センタリング
    wrapper: null, //スクロールを監視する要素 指定しない場合はbodyになる
    round: true, //公式に説明がない・・・若干、止まるときにイーズが効くような?
    vertical: true, //縦パララックス
    horizontal: false //横パララックス
  });
</script>

ここまでの設定を応用すれば、あとはCSS次第でDEMOと同じものが作れます。
Rellax.jsのDEMO

まとめ

今回はRellax.jsで簡単にパララックスを実装する方法を紹介しました。
スマホでもあまり重くならずに動くのでとてもオススメです。

他にも横スクロールの設定やコールバックも簡単に使えるので、使い所があれば今後試してみたいと思います。

パララックスってそもそもどうよ?っていうのは置いておいて、フロントエンドエンジニアとしては一回ぐらいはやることになるんではないかな?
そんなときにはまずRellax.jsを使ってみましょう!

記事一覧

RELATED

Flatpickr
inoue
inoue
TIPS

Flatpickrで日時入力をカレンダー表示にする

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【実践編】見出しの文言を変更できるようにする

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【デザインオプション編】テーマに新しい機能を加える方法

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【準備編】カスタマイズに必要な前提知識について

BACKGROUND VIDEO
inoue
inoue
TIPS

動画をWebページの背景に埋め込む時のテクニック

Google Apps Script
inoue
inoue
TIPS

【GAS】スプレッドシートからメールを送信する方法

NEW POSTS

Sass @import → @use
inoue
inoue
TRY

【Sass】@importを@useに置き換えてみる《FLOCSS対応》

Stripe Payment Links
inoue
inoue
TRY

コーディング一切不要のStripe Payment Linksで決済機能を試してみる

BASE Partners
inoue
inoue
COLUMN

【BASE Partners】有料テーマの無償提供特典について

BASE Partners
inoue
inoue
COLUMN

BASEオフィシャルパートナーに認定されました

BASE DESIGN THEME Q &A よくある質問
inoue
inoue
COLUMN

【BASEデザインテーマ】よくある質問まとめ

Drawer Menu
inoue
inoue
TIPS

CSSと簡単なJSでできるドロワーメニューの実装方法

ブログ記事一覧
  • HOME
  • TIPS
  • Rellax.jsを使って簡単パララックス