スクロールで画像がフェードインする動きを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)’
});
}
});
});
});

effect_btmという新しい変数を導入して、修正しました。

ぜひ、ご活用ください。