プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

javascriptに関するTips

2017.7.11更新

要素をタイムラグをつけながら1個づつ順番に表示させる

Attention!

javascriptを使って、要素を1個づつ順番に表示させる演出です。jQueryは予め読み込んでおいてくださいね。

1まずhtmlでこのようにリストを記述します
<ul class="delay-show">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    ......
</ul>

htmlの記述は特にリストタグでなくても大丈夫です。「delay-show」クラスを付与しています。

2「delay-show」クラスにたいしてjavascriptをこのように記述します。
<script>
$(function() {
    $('ul.delay-show li')
        .css({opacity: 0})
        .each(function(i){
            $(this).delay(500 * i).animate({opacity:1}, 1500);
        });
});
</script>

「.css({opacity: 0})」で要素をあらかじめ消しておき、「each」ファンクションで要素を1つづつ処理していきます。「delay(500*i)」の数値でタイムラグの1/1000秒を設定、「animate({opacity:1}, 1500)」の数値でフェードスピードを調整しています。

3指定位置までスクロールした際に、発動させる場合
<script>
$(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);
		});
	   }); 
       }
    });
  });
});
</script>

varで「画面上部からの距離」「スクロールした量」「画面の高さ」をそれぞれ取得しておき、if条件分岐にて「if (scroll > elemPos – windowHeight + windowHeight/4){」で画面の高さの1/4スクロールした場合に発動するように設定します。

トップへ