鼠标滚动条触发动画

鼠标滚动到指定动画元素的相对位置时触发CSS动画

Add HTML

	<div class="div1-wrap">
		<div class="div1">触发动画</div>
	</div>
	<div class="div2-wrap">
		<div class="div2">静止盒子</div>
	</div>
	<div class="div3-wrap">
		<div class="div3">触发动画</div>
	</div>

Add CSS

.div1-wrap{
	height: 500px;
	background-color: darkgray;
}
.div1{
	width:80px;                       
	background-color:#099; 
	opacity: 0;
}
.div2-wrap{
	height: 500px;
	background-color: lightblue;
}
.div2{
	width:80px;                       
	background-color:#099; 
}
.div3-wrap{
	height: 500px;
	background-color: purple;
}
.div3{
	width:80px;                       
	background-color:#099; 
	opacity: 0;
}
.dh{
	opacity: 1;
	animation:upward 2s;
}

@keyframes upward{
	0%{transform: translateY(45px);}
	100%{transform: translateY(0););
}

Add JavaScript/jQuery

/*
element 标签 cssname CSS动画 offset 相对于窗口的距离
*/
function scrollnumber(element,cssname,offset){
	var a,b,c,d;
	d=$(element).offset().top; // 元素相对于窗口的距离
	a=eval(d + offset); // 目标坐标+窗口距离
	b=$(window).scrollTop(); // 监控窗口已滚动的距离;
	c=$(window).height(); // 浏览器窗口的高度
	if(b+c>a){
		$((element)).addClass((cssname));
	}
}
 
function scrollfun(){
	scrollnumber(".div1",'dh',100);
	scrollnumber(".div3",'dh',100);
}
	
$(document).ready(function() {
	scrollfun();
	$(window).scroll(function(){
		scrollfun();
	});
});