JavaScript

Rellax.jsで簡単にパララックス効果を実装する方法

  /

ウェブサイトのデザインにおいて、パララックス効果は視覚的な魅力を加える非常に効果的な手法です。しかし、jQueryなどの大規模なライブラリを使わず、軽量なJavaScriptライブラリでこの効果を実装することも可能です。
本記事では、Rellax.jsを使用してシンプルかつ効果的なパララックス効果を実現する方法を紹介します。

Contents

Rellax.jsとは？

Rellax.jsは、軽量なJavaScriptライブラリで、パララックス効果を簡単に実装できるものです。パララックス効果とは、スクロールに応じて異なる速度で背景や要素が動くことで奥行きを表現する効果のことを指します。Rellax.jsは簡単な設定でパララックス効果を実装することが可能です。

必要なCSSの記述

パララックス効果のエリア（.container、.block、.rellax）にスタイルを設定するため、以下のようなCSSが必要です。ここではデモ用に基本的なスタイルを設定していますが、必要に応じてカスタマイズしてください。

<style>
body {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0 0 0;
  line-height: 1.8em;
}
section{
  padding-bottom: 100px;
  overflow: hidden;
}
.col {
    text-align: left;
    width: 50%;
    float: left;
    box-sizing: border-box;
}
h4{
  text-align: center;
  margin: 50px 0 30px 0;
}
.container {
    outline: 1px solid #eed;
    font-size: 20pt;
    padding: 37.5vh 12.5vw;
}
.block {
    line-height: 2.0em;
    text-align: right;
    padding: 0 42pt;
    position: relative;
}
.block .rellax img{
    width: 90%;
}
.rellax {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
}
</style>

HTMLの記述

以下は、Rellax.jsを使ったパララックス効果を実装するためのHTMLです。パララックス表示エリア（class=”rellax”）内に画像（1.jpg、2.jpg、3.jpg）を用意しました。画像のパスを自身のものに変更して使用してください。Rellax.jsは、要素にrellaxクラスと適切なdata属性を追加することで効果を適用します。

パララックス表示エリア（class=”rellax”）タグにパララックス効果の「縦スクロールでX軸移動：data-rellax-vertical-scroll-axis=”x”」「縦スクロールでXY軸移動：data-rellax-vertical-scroll-axis=”xy”」等を設定します。設定内容はVanilla Javascript Parallax Library — Rellaxを参照して下さい。

<h1>jQuery不使用のRellax.jsを使って簡単にパララックスを実装し表示してます。<br>下にスクロールしてみて下さい。</h1>
    
<section>
  <div class="col">
      <h4>縦スクロールでX軸移動</h4>
      <div class="container">
        <div class="block"><div class="rellax" data-rellax-vertical-scroll-axis="x"><img src="1.jpg" alt=""></div></div>
      </div>
  </div>
  <div class="col">
      <h4>縦スクロールでXY軸移動</h4>
      <div class="container">
        <div class="block"><div class="rellax" data-rellax-vertical-scroll-axis="xy"><img src="1.jpg" alt=""></div></div>
      </div>
  </div>
</section>

<section>
  <div class="col">
      <h4>縦スクロールでX軸移動（オプション:speedX = 3）</h4>
      <div class="container">
      <div class="block"><div class="rellax" data-rellax-horizontal-speed="3" data-rellax-vertical-scroll-axis="x"><img src="2.jpg" alt=""></div></div>
      </div>
  </div>
  <div class="col">
      <h4>縦スクロールでXY軸移動（オプション:peedX = 1, speedY = 2）</h4>
      <div class="container">
        <div class="block"><div class="rellax" data-rellax-horizontal-speed="1" data-rellax-vertical-speed="2" data-rellax-vertical-scroll-axis="xy"><img src="2.jpg" alt=""></div></div>
      </div>
  </div>
</section>

<section>
  <div class="col">
      <h4>縦スクロールでX軸移動（オプション:MaxX 200）</h4>
      <div class="container">
      <div class="block"><div class="rellax" data-rellax-vertical-scroll-axis="x" data-rellax-max-x="200"><img src="3.jpg" alt=""></div></div>
      </div>
  </div>
  <div class="col">
      <h4>縦スクロールでXY軸移動（オプション:MinX -215 MinY -300）</h4>
      <div class="container">
        <div class="block"><div class="rellax" data-rellax-speed="2" data-rellax-vertical-scroll-axis="xy" data-rellax-min-x="-215" data-rellax-min-y="-300"><img src="3.jpg" alt=""></div></div>
      </div>
  </div>
</section>

JavaScriptの記述

最後に、rellax.jsのスクリプトを読み込み、パララックス効果を有効にするためのJavaScript、
new Rellax(‘パララックス表示エリア’, {オプション})を記述します。

<script src="rellax.js"></script>
<script>
var rellax = new Rellax('.rellax', {
  horizontal: true,
});
</script>

jQuery不使用のRellax.jsを使って簡単にパララックスを実装し表示するデモページ

Rellax.jsを使ったデモページは以下でご覧いただけます。
jQuery不使用のRellax.jsを使って簡単にパララックスを実装し表示するデモページ

ソース元：Vanilla Javascript Parallax Library — Rellax

Vanilla Javascript Parallax Library — Rellax

まとめ

Rellax.jsは、軽量でシンプルにパララックス効果を実装できる優れたライブラリです。本記事で紹介した例を元に、ぜひ自分のサイトに取り入れてみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

パララックス Rellax.js
関連記事