jQuery不使用のRellax.jsを使って簡単にパララックスを実装し表示する方法

jQuery不使用のRellax.jsを使って簡単にパララックスを実装し表示する方法をご紹介します。

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>

Rellax.jsを使って簡単にパララックスを実装し表示するHTML記述

※パララックス表示エリア（class=”rellax”）内に画像（1.jpg、2.jpg、3.jpg）を用意しました。パララックス表示エリア（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>

Rellax.jsを使って簡単にパララックスを実装し表示するJavaScriptの記述

※rellax.jsファイルを読み込みます。new Rellax(‘パララックス表示エリア’, {オプション})を記述します。

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

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

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

ソース元：Vanilla Javascript Parallax Library — Rellax

Vanilla Javascript Parallax Library — Rellax

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