1まずhtmlでこのようにリストを記述します
- リスト1
- リスト2
- リスト3 ......
2「delay-show」クラスにたいしてjavascriptをこのように記述します。
$(function() {
$('ul.delay-show li')
.css({opacity: 0})
.each(function(i){
$(this).delay(500 * i).animate({opacity:1}, 1500);
});
});
「.css({opacity: 0})」で要素をあらかじめ消しておき、「each」ファンクションで要素を１つづつ処理していきます。「delay(500*i)」の数値でタイムラグの1/1000秒を設定、「animate({opacity:1}, 1500)」の数値でフェードスピードを調整しています。
3指定位置までスクロールした際に、発動させる場合
$(function(){
$('ul.delay-show li').css("opacity","0");
$(window).scroll(function (){
$('ul.delay-show li').each(function(){
var elemPos = $(this).offset().top; /*画面上部からの距離*/
var scroll = $(window).scrollTop(); /*スクロールした量*/
var windowHeight = $(window).height(); /*画面の高さ*/
/*発動条件：画面の高さが1/4までスクロールしたら順番に表示*/
if (scroll > elemPos - windowHeight + windowHeight/4){
$(function(){
$('ul.delay-show li')
.each(function(i){
$(this).delay(500*i).animate({opacity:1}, 1500);
});
});
}
});
});
});
varで「画面上部からの距離」「スクロールした量」「画面の高さ」をそれぞれ取得しておき、if条件分岐にて「if (scroll > elemPos – windowHeight + windowHeight/4){」で画面の高さの1/4スクロールした場合に発動するように設定します。
htmlの記述は特にリストタグでなくても大丈夫です。「delay-show」クラスを付与しています。