要素が見えたタイミングでイベントを開始させる

CSS3のアニメーションなどで、要素が見えた瞬間にアニメーションさせたいという場面があったので、
備忘録的なメモです。

ブラウザ上で見えたときに処理を実行するには、
要素までのスクロール量を収得してイベントを発火させるか,
プラグインで、イベントさせるかがあります。

jquery.inview

プラグインを使用する場合

ダウンロードしたquery.inview.jsをhead内で読み込み、

.on(‘inview’, function(){});でイベントの記述をします。

■js
    $('.animation').on('inview', function() {
         $(this).addClass("active");
    });
■css
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.animation.active {
    animation-name: fadeIn;
}

上記のように記述することで、見えたときにアニメーションのフェードインをさせることができます。

単にjsで実行する場合下記のように記述すればOKです。

$(function() {

	var active = $(".animation");

	$(window).scroll(function(){
		var Position = $(active).offset().top - $(window).height();	
	
		if ($(window).scrollTop() > Position) {
			$(this).addClass("active");
		}
	});
});