スクロール時に要素が拡大する動作をjavascriptで実装したい

Question

前提

①のサイトを模写しています。トップに表示してある花の画像のようにスクロール時に画像が拡大する動作を実装したく、ネットで調べたところ②のサイトに行きつきました。しかし、②のサイトではコードがjQueryで書かれていたため、javascriptで実装するために試行錯誤していたのですが、詰まってしまったのでお知恵を拝借したく質問させていただきました。

①：https://code-step.com/demo/html/gallery/
②：https://nnc-studio.jp/plugin/2021/07/05/ani_size/

調べたこと

javascriptで実装するにあたりjQueryで使用されている各部分の意味を調べました。

ーーーーーーーー
$winH = $win.height()

ブラウザの表示領域の高さ
ーーーーーーーー
position = $connect.offset().top

document上にある拡大したい要素のY座標を取得
ーーーーーーーー
scroll = $win.scrollTop();

サイトの一番上からブラウザの表示領域がスクロールした距離
ーーーーーーーー

わからないこと

②のサイトのjQueryで以下の項目が分かりません。

ーーーーーーーー
scroll > position - $winH

if文が使用されているので、”もし scroll > position - $winH が成立した時”、ということはわかるのですが、scroll > position - $winHが具体的にどういう動きになるのかどうかがイマイチわかりません。
ーーーーーーーー
current = (1 - (position - scroll) / $winH) * 2;

こちらに関してはどうして1から(position - scroll) / $winH) を引くのか？どうして2をかけているのか？全く分かりません…
ーーーーーーーー

該当のソースコード

$('.p-jon__item').each(function(){
	var $win = $(window),
		  $winH = $win.height(),
		  $connect = $(this),
		  position = $connect.offset().top,
		  current = 0,
		  scroll;
	$win.on('load scroll', function(){
		  scroll = $win.scrollTop();
		  current = (1 - (position - scroll) / $winH) * 2;
      if (scroll > position - $winH) {
			  $connect.css('transform', 'scale(' + current + ')');
		  }
		  if (current > 1) {
			  current = 1;
		  }
	});
});

Answer 1

①のサイトを模写しているなら、そのサイトのコードを見た方がいいのでは。
デベロッパーツールで簡単に見ることができます。
HTMLはElementsタブでみることができます。
JSコードはSourcesタブ内のmain.jsで見ることができます。

②のサイトは、動きは似てますが、やっていることは微妙に違いますので、そのままでは同じ動きにはなりません。

①のサイトでやっていることの方がずっと単純で、ウィンドウのスクロール位置に応じてメインビジュアルの幅を変更しているだけです。必要なのは、ウィンドウのスクロール位置だけです。

模写先のコードをそのままコピーするのは憚られるので、要点だけ抜き出すと、

<main>
  <div id="mainvisual">
    <img src="mainvisual1.jpg" alt="">
    <img src="mainvisual2.jpg" alt="">
    <img src="mainvisual3.jpg" alt="">
  </div>
  <div class="contents">
    <h1>contents</h1>
  </div>
</main>

#mainvisual {
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}
#mainvisual img {
    width: calc(100%/3);
    height: 100vh;
    flex-shrink: 0;
    object-fit: cover;
}
.contents {
  height: 100vh;
  font-size: 3rem;
}

$(window).on('load resize scroll', function() {
  // スクロール位置を取得
  let scroll = $(window).scrollTop();
  // メインビジュアルのCSS（width）を変更する
  $('#mainvisual img').css({
    'width': 100/3 + scroll/10  + '%'
  });
}

CodePenサンプル

ウィンドウのスクロール位置は、
jQueryなら$(window).scrollTop()
生JSなら、window.scrollYです。

window.scrollY - Web API | MDN

$('#mainvisual img') というような要素の取得は、Document.querySelector() に置き換えます。

Document.querySelector() - Web API | MDN

イベントの付与はaddEventListenerで。
EventTarget.addEventListener() - Web API | MDN

↓生JSのサンプルコード
CodePenサンプル

Comments

[suzu1234]

ご回答ありがとうございます。コードまで記載いただきまして大変助かります。2点ほどわからない点があったので教えていただけますと幸いです。

JSの7行目にある「100/3 + scroll/10 + '%';」の「scroll/10」と「’％’」はどういった意味なのでしょうか？

JS11行目の「["load", "resize", "scroll"]」は3つの画像を指しているのでしょうか？

[hatena19]

画像の幅を％で指定してます。
初期状態(スクロール位置0)は、100/3(33.33)%の幅、
スクロールするにつれて、スクロール量の 1/10 を加算する、つまり画像サイズが大きくなる、ということです。

["load", "resize", "scroll"]は、３つのイベントをまとめて記述するために配列に格納しておいて、
forEach でループさせて addEventListenerで関数と関連付けてます。

[suzu1234]

時間がかかってしまったのですが、教えていただいた情報をもとに何とか意図した動作を実装することができました。詰まっていたので大変助かりました。ありがとうございました！