.scrollY

JavaScriptの.scrollYで背景のパララックスエフェクト

2022年8月11日 6分

パララックスエフェクトを実装する時、JavaScriptのライブラリを使えば複雑なものも簡単に実装が可能です。

が、シンプルなものならJavaScriptのコードだけで実装が可能なので、今回はシンプルな「背景のパララックスエフェクト」についてサンプルを交え、解説してみたいと思います。

コード量もそんなにないので、是非参考にしてみてください。

.scrollY
パララックスエフェクトをつけた背景のサンプル
さいごに

.scrollY

JavaScriptの .scrollY は、文書が垂直方向にスクロールしているピクセル数を返す読み取り専用のプロパティです。

var y = window.scrollY

文書が上にも下にもスクロールしていない場合 scrollY の値は 0 になり、値は小数点の値になります。

かかかず

このプロパティを使って、パララックスエフェクトを作ります。

パララックスエフェクトをつけた背景のサンプル

それでは、パララックスエフェクトをつけた背景のサンプルのご紹介をします。

サンプルは4種類で、上下にスクロールすることで動きます。順にご覧ください。

widthで画像のサイズを徐々に拡大

まずは簡単なパターンとして、 img タグの「width」をjavaScriptのコードを使い、徐々に拡大させます。

下にスクロールすると拡大し、上にスクロールすると縮小します。

重ねるタイトル

山路を登りながら、こう考えた。智に働けば角が立つ。

コードを表示

<!-- CSS -->
<style>
#visualBlock3 {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
#visualImgScale {
    position: absolute;
    max-width: none;
}
</style>

<!-- HTML -->
<div id="visualBlock3">
  <img src="https://dubdesign.net/wp-content/uploads/2022/08/socialicon.jpg" alt="背景" id="visualImgScale">
  <div class="visualText">
    <p class="visualTitle">重ねるタイトル</p>
    <p class="visualDesc">山路を登りながら、こう考えた。智に働けば角が立つ。</p>
  </div>
</div>

<!-- JavaScript -->
<script>
// スクロールイベント
window.addEventListener('scroll', () => {
  // imgタグをidで取得
  const elemImgSC = document.getElementById('visualImgScale');
  // スクロール量を計測して10で除算
  let imgSCScrollY = window.scrollY/20;
  // widthを%で書き換え
  elemImgSC.style.width = 80 + imgSCScrollY + '%';
});
</script>

親要素はflexboxでレイアウトをして、justify-content: center; と align-items: center; にしておくと、img タグが拡大していったとき、中央から拡大されるようにします。

また、img タグは position:absolute; で置き、テキストは position:relative; にすることで画像を背景に設定することができます。

backgroundで背景画像を徐々に拡大

上記の「画像のサイズを徐々に拡大」と似ていますが、こちらはCSSの「background」プロパティを使ったサンプルです。

重ねるタイトル

山路を登りながら、こう考えた。智に働けば角が立つ。

コードを表示

<!-- CSS -->
<style>
#visualBlock {
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-image: url(https://dubdesign.net/wp-content/uploads/2022/08/socialicon.jpg);
    position: relative;
    filter: grayscale(0);
}
</style>

<!-- HTML -->
<div id="visualBlock">
  <div class="visualText textAbsolute">
    <p class="visualTitle">重ねるタイトル</p>
    <p class="visualDesc">山路を登りながら、こう考えた。智に働けば角が立つ。</p>
  </div>
</div>

<!-- JavaScript -->
<script>
window.addEventListener('scroll', () => {
  //visualBlockの要素を取得
  const elem = document.getElementById('visualBlock');
  //現在のスクロール位置を取得して2つの数値を除算
  let scrollY = window.scrollY/10;
  let scrollfilter = window.scrollY/4;
  //取得した値と画像幅を加算してスタイルをあてる
  elem.style.backgroundSize = 60 + scrollY + '%';
  elem.style.filter = 'grayscale('+ 0 + scrollfilter + '%)';
});
</script>

CSSの backgournd-size プロパティを、JavaScriptの .scrollY で拡大・縮小します。

かかかず

カラーから徐々にモノクロに変化していきます。

左右に動く

次に、スクロールで背景画像を下にスクロールで左から右。上にスクロールで右から左に動かします。

重ねるタイトル

山路を登りながら、こう考えた。智に働けば角が立つ。

コードを表示

<!-- CSS -->
<style>
#visualBlock2 {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

#visualImg {
    position: absolute;
    left: -200px;
    top: 60px;
}
</style>

<!-- HTML -->
<div id="visualBlock2">
  <img src="https://dubdesign.net/wp-content/uploads/2022/08/socialicon.jpg" alt="背景" id="visualImg">
  <div class="visualText textAbsolute">
    <p class="visualTitle">重ねるタイトル</p>
    <p class="visualDesc">山路を登りながら、こう考えた。智に働けば角が立つ。</p>
  </div>
</div>

<!-- JavaScript -->
<script>
window.addEventListener('scroll', () => {
  //visualImgの要素を取得
  const elemImg = document.getElementById('visualImg');
  // スクロール量を計測して20で除算
  let imgScrollY = window.scrollY/20;
  // スクロールでX値をtransform
  elemImg.style.transform = 'translateX('+ 0 + imgScrollY + 'px) scale(1.4)';
});
</script>

親要素に overflow: hidden; を入れることで、画像が動いても要素からはみ出さずに動いてくれます。

かかかず

拡大よりは動きがシンプルなので、比較的馴染みやすい感じです。

上下に動く

4つ目は、スクロールで背景の画像が下にスクロールで下がり、上にスクロールで登っていくサンプルです。

重ねるタイトル

山路を登りながら、こう考えた。智に働けば角が立つ。

コードを表示

<!-- CSS -->
<style>
#visualBlock4 {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

#visualVerticalImg {
    position: absolute;
    top: -400px;
}
</style>

<!-- HTML -->
<div id="visualBlock4">
  <img src="https://dubdesign.net/wp-content/uploads/2022/08/socialicon.jpg" alt="背景" id="visualVerticalImg">
  <div class="visualText textAbsolute">
    <p class="visualTitle">重ねるタイトル</p>
    <p class="visualDesc">山路を登りながら、こう考えた。智に働けば角が立つ。</p>
  </div>
</div>

<!-- JavaScript -->
<script>
// スクロールイベント
window.addEventListener('scroll', () => {
  // visualVerticalImgのid名がつく画像を取得
  const elemImg = document.getElementById('visualVerticalImg');
  //現在のスクロール位置を取得して10で除算
  let imgVerScrollY = window.scrollY/10;
  //取得したスクロール値でY値をtransform
  elemImg.style.transform = 'translateY('+ 0 + imgVerScrollY + 'px) scale(1.4)';
});
</script>

縦方向の動きは、スクロールと視線が連動するので、シンプルで見やすいパララックスエフェクトです。

かかかず

もう少しダイナミックに動かしたい場合は、JavaScriptの除算の値を変えればOKです。