簡易パララックス（jquery）

こんにちは。まめちゃんです。
普段の作業メモとして掲載していますので、気に入ったものがあれば、是非使ってやってください。

今日はスクロールした時に特定の画像がパララックスとしてゆっくり移動していくコードを書いたので共有します。
※キービジュアルや背景をパララックスしてるものは検索していくつか見つかったのですが、本文内にあるような小さな画像に対して設定するものが見つけられなかったので作成しました。
参考サイト：https://www.casleyconsulting.co.jp/blog/engineer/283/

早速コードを。

function parallaxImg() {
   var window_height = window.innerHeight; //デバイスの画面高さ
   var img_height = $('.parallax-img >img').height(); //画像高さ
   var box_height = $('.parallax-img').innerHeight(); //ボックス高さ
   var box_top = $('.parallax-img').offset().top; //ボックス位置
   var parallax_top = box_top - window_height; //パララックス開始位置
   var parallax_bottom = parallax_top + window_height + box_height; //パララックス終了位置
   var scroll_top = $(window).scrollTop(); //画面位置
   if (parallax_top < 0) {
       //ページトップから表示された時に表示されている場合の処理
       box_top = window_height;
       parallax_top = box_top - window_height; // 0
       parallax_bottom = parallax_top + window_height + box_height - (window_height - box_top);
   }
   if (parallax_top <= scroll_top && parallax_bottom >= scroll_top) {
       var scroll_distance = img_height - box_height; //移動幅
       var now_percent = (scroll_top - parallax_top) / (parallax_bottom - parallax_top);
       var transform = 'translateY(-' + (now_percent * scroll_distance) + 'px)';
       $('.parallax-img >img').css('transform', transform);
   }
}
$(window).ready(function () {
   parallaxImg();
});
$(window).scroll(function () {
   parallaxImg();
});

<div class="parallax-img">
   <img src="https://placehold.jp/1000x700.png" alt="ダミー画像">
</div>

<style>
.parallax-img {
   height: 450px;
   overflow: hidden;
   >img {
       max-width: 100%;
   }
}
</style>

簡単な説明/補足
・動きを付けたいimgを.parallax-img直下におけばOK
・個人的に、表示高さ450pxに対して画像700px以上ないと気付きにくい。
・タブレットサイズでは300px, スマホサイズ200px程度？？？

手こずった点
・作成初めの時点で、ページトップを読み込んだ時に表示されることを考慮しておらず、条件分岐なしではページ表示の初めから既に画像上部分が見えなくなってしまうという問題発生して慌てた点。

以上！