カウンターを設置、画面に現れたら一回だけ実行する。 | 京都でホームページ制作『みやこデザイン』

　カウントアップ用カウンターを作った。これは簡単だ。画面に表示したらというタイミングコントロールも自分で書ける。しかし、これを組み合わせると、どうしてもスクロールすることに実行されてしまう。つまり、画面を動かす度にカウンターがリセットしてはじまっちゃう。これはだめでしょう。ということで、色々やること3時間。ようやくできました。

$(function(){
		var yohaku = $('.counter').offset().top;//動かしたい要素のてっぺんからの高さを取得
		var scroll = $(window).scrollTop();//スクロールした高さを取得
		var windowHeight = $(window).height();//画面の高さを取得
      if (scroll > yohaku - windowHeight + 100){//画面下に隠れていた要素がスクロールされ、そのスクロール幅が隠れていた分を超えると、要素は当然画面に現れる。
  $(window).one('scroll', function (){//そしたら、一回だけ実行しようよ。ここがミソでしたわ。
    $('.counter').each(function(){
	var num = $(".counter").attr('start-number');
	var tgt = $(".counter").attr('stop-number');
	var speed = $(".counter").attr('speed');
	setInterval(function(){
		if(num <= tgt){
			$(".counter").html(num);
			num++;
		}
	},speed);
    });
  });
	}
});

$(function(){

var yohaku = $('.counter').offset().top;//動かしたい要素のてっぺんからの高さを取得

var scroll = $(window).scrollTop();//スクロールした高さを取得

var windowHeight = $(window).height();//画面の高さを取得

if (scroll > yohaku - windowHeight + 100){//画面下に隠れていた要素がスクロールされ、そのスクロール幅が隠れていた分を超えると、要素は当然画面に現れる。

$(window).one('scroll', function (){//そしたら、一回だけ実行しようよ。ここがミソでしたわ。

$('.counter').each(function(){

var num = $(".counter").attr('start-number');

var tgt = $(".counter").attr('stop-number');

var speed = $(".counter").attr('speed');

setInterval(function(){

if(num <= tgt){

$(".counter").html(num);

num++;

}

},speed);

});

}

});

これがjquery。htmlはデータを埋め込んでます。

<div class="counter-wrap">
<span class="counter" start-number="0" stop-number="400" speed="10"></span>
</div>

</div>

動いてるよ～。