【特效】页⾯滚动到相应位置运⾏css3动画
请到我的个⼈博客⽹站上浏览此⽂章，欢迎评论和建议。
现在css3动画很常见了，实际项⽬中经常应⽤，特别是那种长长的信息展⽰类的页⾯。于是产⽣⼀个问题，需要控制动画的运⾏，就像给其加⼀个开关，什么时候动，什么时候停，想随⼼所欲的控制。⾃然会⽤到animation-play-state属性，其两个属性值paused：规定动画已暂停，和running：规定动画正在播放，正好能满⾜要求。
对于那种长长的页⾯，给⼀些⽂字或图⽚添加了动画后，想实现其随着页⾯滚动⽽动画的效果，因为如果动画⼀开始就运⾏，那么处在不是第⼀屏的内容，就算其动画运⾏了，我们也看不到。所以，就要实现，当内容从页⾯底端滚动出来，也就是出现在视野范围内时，动画才运⾏。这就免不了⽤到js，来获取滚动条滚动的⾼度，和动画所在层的位置。
写了⼀个简单的demo来具体说明吧，只写了⼀个⽂字从右向左移动的动画，当其滚动出现时，才运⾏：
html:
<div class="con">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<ul class="list">
<li>
<p>第1屏动画进⼊视线</p>
</li>
<li>
<p>第2屏动画进⼊视线</p>
</li>
<li>
<p>第3屏动画进⼊视线</p>
</li>
</ul>
css:js控制css3动画触发
.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");
}
});
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。