2019.05.14

背景をずらすパララックスのJavaScriptライブラリ「rellax.js」

この記事の結論

パララックス(parallax)とは

今回は、他のホームページとデザインの差別化をしたいときに便利な、パララックスのJavaScriptライブラリを紹介します。

パララックスとは「視差(視差効果)」とも言い、簡単に言うと動くスピードや動く方向などに差を付けることを指します。

デモページを見ると一発で分かると思いますが、大きい丸い球はスクロールの際に速く動き、小さい丸い球はゆっくり動いているのが分かるかと思います。

パララックスを使うことによって奥行きが生まれ、表現の幅が広がります。昔から使われている表現方法ですが、案外使ったことのある人は少ないのではないでしょうか。

今回紹介するrellax.jsを使えば、簡単にパララックスを導入することができるので是非使ってみてください。

まず、公式ページからgithubに飛び、zipファイルをダウンロードしましょう。

rellax_top

rellax_github

zipファイルを解凍すると、「rellax.min.js」というファイルがあるので、これをjsフォルダなどの任意の場所に格納し、読み込みます。

demo.html

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

次に、rellax.jsを適用させるclassを以下のうように記述します。.rellaxに当たる部分は任意の名称でかまいません。

demo.html

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

読み込む順番に注意してください。<script src="js/rellax.min.js"></script>の後にvar rellax = new Rellax('.rellax');を読み込まないと動作しません。

ここまででJavaScriptに関する準備は完了です。あとは適用させたいhtml要素に.rellaxクラスを適用させるだけです。

demo.html

<div class="rellax">
  //この要素がパララックスとして適用される
</div>

他の要素よりも速く動いてほしいときはdata-rellax-speed属性を0以上にします。反対に他の要素よりも遅く動いてほしい場合はdata-rellax-speed属性を0以下にします。

demo.html

<div class="rellax" data-rellax-speed="7">
  //この要素は他の要素より速く動きます。
</div>

<div class="rellax" data-rellax-speed="-5">
  //この要素は他の要素より遅く動きます。
</div>

他にもいろいろオプションがあるので、公式ページで確認してみてください。

僕が作ったデモページは以下になります。よければ参考にしてみてください。

パララックスは印象的でオシャレに魅せるのに最適な表現だと思いますが、シンプルなウェブサイトと比べると目が疲れるのも事実です。

例えば、ブログをメインとするサイトにパララックスは適していないでしょう。なぜなら、ブログは文章を読むことが目的であり、デザインを見に来ている訳ではないからです。

対して、会社・商品の宣伝ページ、アーティストのページなど、インパクトを重視しているページに関しては効果的になります。普通のサイトにはない動きがあることで印象に残りやすいからです。(それでも、色んなところに使い過ぎているページは見てて疲れるというのが正直なところ…)

ケースバイケースだとは思いますが、ユーザー目線に立って「本当に必要か？」ということを考えて利用するのが良いかと思います。

サルワカさんのこちらのページでパララックスのサイトをまとめてくれていますので、ぜひ参考にしてみてください。インスピレーションが刺激されて良いアイデアが浮かんだりします。