【jQuery】スクロールで画像が拡大する動きを実装

2022.10.26

【jQuery】スクロールで画像が拡大する動きを実装

今回はスクロールすると背景画像が大きく拡大していく動きをjQueryで実装していきます。
メインビジュアルに使うとインパクトがあって良いかもしれませんね。

HTMLの記述

背景画像を置く場所を記述します。

<div class="bgScale">
  <h1>SAMPLE TEXT</h1>
  <p>Enter the sample text here.<br>
      I hope you can make something really good.</p>
</div>

CSSの記述

背景画像を上下左右中央に配置しました。（画像に合わせてお好みで。）

.bgScale {
  background: url(https://www.nan-demo.work/wp-content/uploads/2022/07/image07.jpg) no-repeat 50% 50%;
  background-size: 100%;
  width: 100%;
  height:600px; 
}

jQueryの記述

「scroll/6」の箇所ですが、小さい程拡大率は上がります。
（一気に大きくなります。）
少しづつ拡大する場合は6～10くらいがいいのかな？と思います。

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $('.bgScale').css({
    backgroundSize: (100 + scroll/6)  + "%",
  });
});

実装結果

<br /> See the Pen <a href="https://codepen.io/Uchaaan/pen/OJEJeKP"><br /> Untitled</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

いかがでしょうか。
どんな画像を置くかによって、高さや拡大率を変えて実装してみてください。