yuma-watanabe
3/9/2017 - 1:25 AM

【jQuery】スクロール連動アニメーションをサクッと実装するやーつ

【jQuery】スクロール連動アニメーションをサクッと実装するやーつ

/*
Ex:
ScrollAnimation($('#object'),{left:'50%',opacity:1},'slow',500);
ScrollAnimationEach($('.list_item'),{opacity:1},'normal', 500,250);
*/

function ScrollAnimation(object,animationArr,speed,gap){
	if(!gap){
		gap = 200;
	}
	console.log(gap);
	$(window).on("load scroll resize",function() {
		if ($(window).scrollTop() >= objectOffset - gap){
			object.stop(true,false).animate(animationArr,speed);
		}
	});
}

function ScrollAnimationEach(object,animationArr,speed,gap,timeout){
	if(!gap){
		gap = 200;
	}
	if(!timeout){
		timeout = 0;
	}
	var objectOffset = object.offset().top;
	$(window).on("load scroll resize",function() {
		if ($(window).scrollTop() >= objectOffset - gap){
			object.each(function(k,v){
				var $this= $(this);
				setTimeout(function() { 
					$this.stop(true).animate(animationArr,speed);
				}, timeout*k);
			});
		}
	});
}