MENU CLOSE

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

JavaScript

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

DEMO

簡単なデモを作りました。
DEMO

準備

まずは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を使う準備が整いました。

実装

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

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

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

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

次にHTMLを書きます。

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

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

応用編

ここまでの工程では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と同じものが作れます。
DEMO

まとめ

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

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

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

記事一覧

Related

wordpress
inoue
inoue
TIPS

【WordPress】便利なアクションフック「template_redirect」

wordpress
inoue
inoue
TIPS

【WordPress】REST APIで独自エンドポイントの作り方

wordpress
inoue
inoue
TIPS

【WordPress】画像に自動付与されるsrcset属性を削除する

wordpress
inoue
inoue
TIPS

WordPressでよく使うプラグイン15選!

JavaScript
inoue
inoue
TIPS

スライダーといえばSwiper!

gulp+webpack
inoue
inoue
TIPS

gulp4 + webpack4でつくるフロント開発環境

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