【JavaScript】スクロールで画像を拡大する【メインビジュアル】

こんにちは、Ryohei（@ityryohei）です！

以前、下記でご紹介した内容をjQueryではなく素のJavaScriptで記述したものになります。

【jQuery】スクロールで画像を拡大！メインビジュアルに動きを付ける

スクロールするとメインビジュアルの背景に設定している画像が少しずつ拡大していきます。ただ画像を表示するだけではなく、少し動きをつけることでユーザーに印象付けることができます。詳細は下記のデモをご覧いただければと思います。（右上の「EDIT ON CODEPEN」をクリックすると全画面でご覧いただけます。）

See the Pen Scroll Scale Image｜JavaScript by ryoy (@intotheprogram) on CodePen.

スクロールでメインビジュアルの画像を拡大する

では解説していきます。

HTML

HTMLを記述します。画像の変更が簡単になるように、インラインに背景画像を記述しています。インラインではなく、CSSに記述していただいても大丈夫です。

<section
  id="keyvisual"
  style="background-image: url(https://into-the-program.com/uploads/modal-window.jpg)">
  <h1>Into the Program</h1>
</section>

CSS

CSSを記述します。background-sizeはcoverやcontainではなく数値で指定するようにします。スクリプトでbackground-sizeの数値を大きくしていくためです。親要素の幅や高さに合わせて、初期値を100%や200%等のパーセントで指定します。

#keyvisual {
  width: 100%;
  height: 400px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

JS

スクリプトを記述します。詳細は記載のコメントをご覧いただければと思います。

window.addEventListener('scroll', () => {
  //idがkeyvisualの要素を取得
  let elem = document.getElementById('keyvisual');
  //現在のスクロール位置を取得して、10で除算
  let scrollY = window.scrollY/10;
  //上で取得した値と画像幅を加算して、elemの背景サイズに設定
  elem.style.backgroundSize = 100 + scrollY + '%';
});

最後に

もし、JavaScriptをしっかりと勉強したい方は下記の参考書がおすすめです。基礎から応用まで多くのサンプルを用いて解説されています。ページ数は多いですが、その分内容も濃いです。腰を据えて学びたい方に最良の一冊です。

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく [ 磯 博 ]

以上、jQueryを使わずに、スクロールでメインビジュアルの画像を拡大する方法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

Follow @itpryohei