利用jquery制作滚动到指定位置触发动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yaoyyl/article/details/51396891
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用jquery制作滚动到指定位置触发动画</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.gs{
position:relative;
top:100px; 
background-color:#099; 
left:150px; width:80px; 
}
.xz{
animation:roate 2s;
animation-fill-mode:forwards;
animation-direction:alternate;
}

@keyframes roate{
	from { transform:rotate(0deg);
	width:100px;
  height:100px; }
	to{transform:rotate(360deg);
	width:200px;
  height:200px;
	}}
.xs{ width:50px; float: left; height:30px; background-color: #F90; position:fixed; left:700px; top:0px;}
</style>
</head>

<body>
<script type="text/javascript">
/*var a,b,c;
a=$("#dh").offset().top;//元素相对于窗口的距离
b=$(window).scrollTop(); //监控窗口已滚动的距离;
c=$(document).height();//整个文档的高度
d=$(window).height();//浏览器窗口的高度
element  标签
cssname  动画
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("#dh1",'xz',100);
	scrollnumber("#dh2",'xz',100);
	scrollnumber("#dh3",'xz',100);
	scrollnumber("#dh4",'xz',100);
}
	
$(document).ready(function(e) {
	scrollfun();
	$(window).scroll(function(){
		scrollfun();
	});
});
</script>

<div style="height:auto; background-color:#999; width:500px; margin: 0 auto;">
	<div class="com" style="height: 500px;background-color: darkgray;position: relative;">
		<div id="dh1" class="gs" >触发动画111</div>
	</div>
	<div style="height: 600px;background-color: cadetblue;" ></div>
	<div class="com" style="height: 500px;background-color: darkgray;position: relative;">
		<div id="dh2" class="gs" >触发动画222</div>
	</div>
	<div style="height: 600px;background-color: darkseagreen;" ></div>
	<div class="com" style="height: 500px;background-color: darkgray;position: relative;">
		<div id="dh3" class="gs" >触发动画333</div>
	</div>
	<div style="height: 600px;background-color: cadetblue;" ></div>
	<div class="com" style="height: 500px;background-color: darkgray;position: relative;">
		<div id="dh4" class="gs" >触发动画444</div>
	</div>
</div>
</body>
</html>



当知道滚动方向时可以使用下面的方法

<script src="js/lib/jquery.mousewheel.js"></script>

//向下滚动时
function addClass(ele){
    var winH=$(window).height()*0.5;//可视窗口的高度的一半,更改0.5可以调整滚动到底部、中部、顶部时候开始加载
    var top=$(window).scrollTop();//可视窗口的滚动高度
    var ele_t=$(ele).offset().top;//内容区的top
    var ele_h=$(ele).height();//内容区的高

    //判断条件,看草稿图1    if(top<ele_t-winH){
        $(ele).removeClass('on');
    }else if((top>ele_t-winH)&&(top<ele_t+ele_h)){
        $(ele).addClass('on');
    }else{
        $(ele).removeClass('on');
    }
}
//向上滚动时,看草稿图2function addClass2(ele){
    var winH=$(window).height()*0.5;//更改0.5可以调整滚动到底部、中部、顶部时候开始加载
    var top=$(window).scrollTop();//可视窗口的滚动高度
    var ele_t=$(ele).offset().top;//内容区的top
    var ele_h=$(ele).height();//内容区的高

    //判断条件
    if(top>ele_t+ele_h){
        $(ele).removeClass('on');
    }else if((top<ele_t+ele_h)&&(top>ele_t-winH*2)){
        $(ele).addClass('on');
    }else{
        $(ele).removeClass('on');
    }
}





            
阅读更多
换一批

没有更多推荐了,返回首页