以后地位:首页 > 建站常识 > 列表

页面转动到响应地位运转css3动画

点击: 次时辰:2017/9/18关头词:上海网站设想 网站扶植 css3动画
此刻css3动画很罕见了,现实上海网站设想的名目中操纵,是那种长长的信息展现类的页面。因而发生一个题目,须要节制动画的运转,就像给其加一个开关,甚么时辰动,甚么时辰停,想为所欲为的节制。天然会用到animation-play-state属性,其两个属性值pa
页面转动到响应地位运转css3动画

此刻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动画

预定建站
收费供给网站优化
支付关头词