【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

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

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

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍