お客さんのホームページで、スクロールで写真がフェードインする動きをつけて欲しいという依頼がありました。
こちらのブログ記事を参考にして欲しいとのこと。
スクロールでふわっと現れるフェードインの動きをjQueryで実装
ところが、思い通りに上手く動きませんでした。
プログラムコードを読んでいくと、一部おかしいところがあったので、修正したところ、無事動くようになりました。
おかしかったところは、effect_posの変数の取り扱いです。初期値がどんどん変わっていってしまいます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$(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という新しい変数を導入して、修正しました。
ぜひ、ご活用ください。
コメント