window.pageYOffset

JavaScriptのwindow.pageYOffsetでスクロール量に応じてパララックスエフェクト

2023年4月7日 5分

パララックスエフェクトは、通常のウェブページと比べて動的な印象を与えることができます。

中でも、背景画像を用いたパララックスエフェクトは、コンテンツの重要性を強調して、ウェブページの視覚的な魅力を高めることができます。

この記事では、JavaScriptを用いたパララックスエフェクトのかけ方について解説していますので、是非最後までご覧いただけると嬉しいです。

window.pageYOffset
パララックスエフェクトのサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

window.pageYOffset

JavaScriptの pageYOffsetは、ウィンドウの上端から現在表示されているコンテンツの上端までの距離をピクセル単位で返すプロパティです。

var y = window.scrollY

かかかず

pageYOffsetは、古いバージョンのInternet Explorerを含むほとんどのブラウザでサポートされています。

この記事では、Window.pageYOffsetプロパティを使用し、スクロール位置が変更されるたびに動的に変化させて、動的な処理を加えてパララックスエフェクトをかけていきます。

パララックスエフェクトのサンプル

早速、サンプルです。

3つの画像が並んでいますが、スクロール量に応じで1枚目・3枚目の画像は右。2枚目の画像は左方向に動きます。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。

HTMLを記述

まずはじめに、HTMLを記述します。

コードを表示

<div class="parallax parallax1"></div>
<div class="parallax parallax2"></div>
<div class="parallax parallax3"></div>

JavaScriptを記述

次にJavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

const parallax1 = document.querySelector('.parallax1');
const parallax2 = document.querySelector('.parallax2');
const parallax3 = document.querySelector('.parallax3');

window.addEventListener('scroll', function () {
  let offset = window.pageYOffset; /* スクロール量を取得する */
  parallax1.style.backgroundPositionX = offset * 0.1 + 'px'; /* スクロール量に応じて、背景画像をX方向に移動 */
  parallax2.style.backgroundPositionX = -offset * 0.1 + 'px'; /* スクロール量に応じて、背景画像をX方向に移動 */
  parallax3.style.backgroundPositionX = offset * 0.2 + 'px'; /* スクロール量に応じて、背景画像をX方向に移動 */
    });

CSSを記述

最後に、CSSを記述して見た目を整えます。

コードを表示

.parallax {
      height: 200px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-color: #f0dc41;
    }
    .parallax1 {
      background-image: url("https://dubdesign.net/wp-content/uploads/2022/01/randomimg_001.jpg");
    }
    .parallax2 {
      background-image: url("https://dubdesign.net/wp-content/uploads/2022/01/randomimg_002.jpg");
    }
    .parallax3 {
      background-image: url("https://dubdesign.net/wp-content/uploads/2022/01/randomimg_003.jpg");
    }

かかかず

これで完成です。

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。

この3つのコードについて、順に解説していきます。

HTML

HTMLは、.parallax1と.parallax2 .parallax3 の3つの div タグを配置します。

<div class="parallax parallax1"></div>
<div class="parallax parallax2"></div>
<div class="parallax parallax3"></div>

HTMLはこれだけでOKで、JavaScriptとCSSで背景画像を設定してパララックスエフェクトをかけます。

JavaScript

JavaScriptは、パララックスエフェクトを実現するための処理を記述しています。まずはじめに、.parallax1と.parallax2 .parallax3の3つの要素を取得します。

const parallax1 = document.querySelector('.parallax1');
const parallax2 = document.querySelector('.parallax2');
const parallax3 = document.querySelector('.parallax3');

window.addEventListener('scroll', function () {
  let offset = window.pageYOffset; /* スクロール量を取得する */
  parallax1.style.backgroundPositionX = offset * 0.1 + 'px'; /* スクロール量に応じて、背景画像をX方向に移動 */
  parallax2.style.backgroundPositionX = -offset * 0.1 + 'px'; /* スクロール量に応じて、背景画像をX方向に移動 */
  parallax3.style.backgroundPositionX = offset * 0.2 + 'px'; /* スクロール量に応じて、背景画像をX方向に移動 */
    });

次に、window.scrollイベントで、スクロール量に応じて画像の位置を変更するように設定されたイベントハンドラーが実行されます。具体的には、スクロール量を取得して、それを用いて背景画像の位置を計算します。

背景画像の位置を計算するためには、window.pageYOffset を使用してスクロール量を取得する必要があります。そして、parallax1とparallax2 parallax3それぞれに対して、backgroundPositionXスタイルを設定しています。この値を変更することで、背景画像の位置を左右に移動させることができます。

CSS

CSSは、「parallax」のclass名を持つ要素に、background プロパティで、パララックスエフェクトを適用しています。

.parallax {
      height: 200px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-color: #f0dc41;
    }
    .parallax1 {
      background-image: url("https://dubdesign.net/wp-content/uploads/2022/01/randomimg_001.jpg");
    }
    .parallax2 {
      background-image: url("https://dubdesign.net/wp-content/uploads/2022/01/randomimg_002.jpg");
    }
    .parallax3 {
      background-image: url("https://dubdesign.net/wp-content/uploads/2022/01/randomimg_003.jpg");
    }

全部で3つの「parallax」のclassを持つ要素を用意して、それぞれに異なる背景画像を設定します。

サンプルでは「randomimg_00X.jpg」の連番の画像を指定しているので、カスタマイズして使用する場合はこのURLを書き換えて利用しましょう。