建站常识

页面滚动到相应位置运行css3动画

发布时间 | 2017/9/18  点击 | 

现在css3动画很常见了,实际上海网站设计的项目中应用,是那种长长的信息展示类的页面。于是产生一个问题,需要控制动画的运行,就像给其加一个开关,什么时候动,什么时候停,想随心所欲的控制。自然会用到animation-play-state属性,其两个属性值paused:规定动画已暂停,和running:规定动画正在播放,正好能满足要求。

对于那种长长的页面,给一些文字或图片添加了动画后,想实现其随着页面滚动而动画的效果,因为如果动画一开始就运行,那么处在不是第一屏的内容,就算其动画运行了,我们也看不到。所以,就要实现,当内容从页面底端滚动出来,也就是出现在视野范围内时,动画才运行。这就免不了用到js,来获取滚动条滚动的高度,和动画所在层的位置。

html:

<ul class="list">

<li><p>动画一</p></li>

<li><p>动画二</p></li>

<li><p>动画三</p></li>


</ul>

css:

.con{ height:1200px;}

.list{ list-style:none; padding:0; margin:0; border-top:2px solid blue;}

.list li{ height:500px; border-bottom:1px solid green;}

.list li p{ opacity:0; animation:move 1s forwards; animation-play-state:paused;}

.list .move p{ animation-play-state:running;}

@keyframes move{

from{ opacity:0; margin-left:500px;}

to{ opacity:1; margin-left:0;}

}

js:

$(document).ready(function(){

var a,b,c;

a=$(window).height();

$(window).scroll(function(){

var b=$(this).scrollTop();

$(".list li").each(function(){

c=$(this).offset().top;

if(a+b>c){

$(this).addClass("move");

}

else{

$(this).removeClass("move");

}

});

});

});


源码下载 页面滚动到相应位置运行css3动画

相关信息