CSS3-动画在视口中,如果可见元素(页面滚动) [英] CSS3-Animate elements if visible in viewport (Page Scroll)
问题描述
我已经加入CSS动画的各种div元素在我的HTML page.But所有的动画使用了在同一时间和放大器;我看不到动画在page.How的底部,我可以让他们玩,而我向下滚动页面?
I have added CSS animations to various div elements on my html page.But all the animations played at the same time & i can't see the animations at the bottom of the page.How can i make them play while i scroll down the page ?
推荐答案
您需要使用 JS 或的jQuery 为触发您 CSS3 过渡/动画结果
一旦元素在视口中**。
You'll need to use JS or jQuery to trigger your CSS3 transition / animation
once the element is in viewport**.
聆听负荷
,调整
和滚动
事件得到的如果一个元素进入视窗的。结果
您可以使用小的jQuery插件我已经建立:
(<一href=\"http://stackoverflow.com/a/26831113/383904\">http://stackoverflow.com/a/26831113/383904)
listening to load
, resize
and scroll
events to get if an element entered the Viewport.
You can use a small jQuery plugin I've built:
(http://stackoverflow.com/a/26831113/383904)
让我们假设你有一个像动画框:
Let's say you have boxes that animate like:
<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>
比你的CSS你有:
than in your CSS you have:
.box{
width:300px;
height:300px;
margin:500px 50px;
background:red;
transition: 1.5s; /* THE DURATION */
}
.rotate.triggeredCSS3 {transform : rotate(360deg); }
.scale.triggeredCSS3 {transform : scale(1.6); }
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); }
其中 .triggeredCSS3
将由插件动态分配的:
$(".box").inViewport(function(px){
if(px) $(this).addClass("triggeredCSS3") ;
});
这篇关于CSS3-动画在视口中,如果可见元素(页面滚动)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!