スクロールで画像がフェードインする動きをjQueryで実現する

お客さんのホームページで、スクロールで写真がフェードインする動きをつけて欲しいという依頼がありました。

こちらのブログ記事を参考にして欲しいとのこと。

ところが、思い通りに上手く動きませんでした。

プログラムコードを読んでいくと、一部おかしいところがあったので、修正したところ、無事動くようになりました。

おかしかったところは、effect_posの変数の取り扱いです。初期値がどんどん変わっていってしまいます。

$(function(){
        var effect_btm = 300; // 画面下からどの位置でフェードさせるか(px)
        var effect_move = 50; // どのぐらい要素を動かすか(px)
        var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000
        
        // フェードする前のcssを定義
        $('.scroll-fade').css({
                opacity: 0,
                transform: 'translateY('+ effect_move +'px)',
                transition: effect_time + 'ms'
        });
        
        // スクロールまたはロードするたびに実行
        $(window).on('scroll ', function(){
                var scroll_top = $(this).scrollTop();
                var scroll_btm = scroll_top + $(this).height();
                var effect_pos = scroll_btm - effect_btm;
                
                
                // effect_posがthis_posを超えたとき、エフェクトが発動
                $('.scroll-fade').each( function() {
                        var this_pos = $(this).offset().top;
                        if ( effect_pos > this_pos ) {
                            $(this).css({
                                    opacity: 1,
                                    transform: 'translateY(0)'
                            });
                        }
                });
        });
});