jQueryのアニメーションとCSSでなんちゃってパララックスを作ってみたでご紹介した方法を少しアレンジして、の表示/非表示がスクロールするたびに繰り返されるようにしました。
ソースは以下をご参照ください。
jQueryの書き方
スクロール値が指定値を越えたらフェードインして、それより少なくなったらフェードアウトする仕組みです。
//スクロール値ごとの動きを設定
$(function() {
$(window).scroll(function () {
var top = $(this).scrollTop();
if(top > 150) {
$("#box1").fadeIn('800');
}else {
$("#box1").fadeOut('800');
}
if(top > 900) {
$("#box2").fadeIn('800');
}else {
$("#box2").fadeOut('800');
}
if(top > 1600) {
$("#box3").fadeIn('800');
}else {
$("#box3").fadeOut('800');
}
});
});