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

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

スクロール量に応じてメインビジュアルの画像が少しずつ拡大する処理のご紹介です！

ページを下方向にスクロールすると、メインビジュアルの画像が少しずつ拡大していきます。スクロールすると画像のサイズが変わっていきますので、ユーザーの目を引きますね。

下記は本記事でご紹介する内容のデモになります。実際にスクロールして処理内容をご確認ください。（右上の「EDIT ON CODEPEN」をクリックすると全画面でご覧いただけます。）

本記事では拡大するようにしていますが、CSSのフィルターを使って徐々に効果を加えたりと応用も効きますので、本記事を参考に色々と試していただければと思います。

スクロール量に応じて画像を拡大する処理

下記は上でご紹介したデモで使用しているHTMLの一部になります。画像はbackground-imageで設定して、背景としてインラインに記述しています。もちろんCSSに記述しても大丈夫です。

HTML

<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-imageの表示方法を記述しています。background-sizeにはcontainやcoverではなく、パーセントで設定するようにします。表示位置はcenterとしていますが、お好みの表示方法に変更してご利用ください。

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

JS

最後にスクリプトです。各行の処理については記載のコメントをご確認ください。

//スクロールイベント取得
$(window).on('scroll', function(){

  //スクロール位置を取得
  var scrollY = $(window).scrollTop();
  //background-size+(スクロール位置/10)
  var bgSize = 100+(scrollY/10);

  //bgSizeが200より小さければ
  if(bgSize < 200){
    //background-sizeにbgSizeを設定
    $('#keyvisual').css('background-size', bgSize+'%');
  }
});

最後に

本記事ではメインビジュアルの画像に簡単な動きをつけてみましたが、少し動きをつけるだけでもサイト全体の印象が変わりますので、世界中で公開されている沢山のサイトを見て回って、多様な動きを取り入れて、リッチなウェブサイトを制作してみてくださいね。

（CSSフィルターを使った応用方法は後日まとめますので、しばらくお待ちいただければ幸いです。）

以上、スクロール量に応じて画像を拡大する処理のご紹介でした！