当内容滚动到视图时激活CSS3关键帧动画 [英] Activate CSS3 keyframe animation when the content scrolls into view
问题描述
我一直在试图弄清楚如何让动画发生时,它滚动到视图,但很少或没有运气。我发现了一个JQuery插件Waypoints,但我缺乏使用它的技能。我试图使用CSS3关键帧动画时,它们滚动到视图。我做了一个突破,接近我想要完成的,但它不是我想要的地方。我有一个名为bounceinright的类,使项目反弹在屏幕的右侧。这里是CSS的:
I have been trying to figure out how to have animations occur when it is scrolled into view but with little to no luck. I found a JQuery plugin "Waypoints" but I lack the skills to utilize it. I am trying to use CSS3 keyframes that animate when they are scrolled into view. I made a breakthrough and am close to what I want to accomplish but it isn't quite where I want it. I have a class named "bounceinright" that makes the item bounce in to the right of the screen. Here is the CSS for that:
@-webkit-keyframes bounceinright {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceinright {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceinright {
-o-transform: translateX(2000px);
}
60% {
opacity: 1;
-o-transform: translateX(-30px);
}
80% {
-o-transform: translateX(10px);
}
100% {
-o-transform: translateX(0);
}
}
@keyframes bounceinright {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounceinright {
display: none;
}
.bounceinright.start {
-webkit-animation: bounceinright 1s ease-out forwards;
-moz-animation: bounceinright 1s ease-out forwards;
-ms-animation: bounceinright 1s ease-out forwards;
-o-animation: bounceinright 1s ease-out forwards;
animation: eigbounceinrighthty 1s ease-out forwards;
display: block;
}
然后我有一个JQuery代码片段, 开始。
and then I have a little JQuery snippet that will trigger the animation with the class "start" when it is scrolled to.
////////////////////////////////
//scroll events
////////////////////////////////
function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.row .wpb_content_element');
// If the animation has already been started
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
}
}
// Capture scroll events
$(window).scroll(function(){
checkAnimation();
});
我的问题是,当一个项目bounceinright滚动到,它触发所有的项目具有相同的类。我想知道是否有一种方法让他们单独触发,但同一类。
my problem though is that when one item with "bounceinright" is scrolled to, it triggers ALL of the items with the same class. I was wondering if there was a way to have them trigger individually but with the same class. Any help would be appreciated.
谢谢!
推荐答案
checkAnimation()
到
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.row .wpb_content_element');
$elem.each(function(){
var $singleElement = $(this);
// If the animation has already been started
if ($singleElement.hasClass('start')) return;
if (isElementInViewport($singleElement)) {
// Start the animation
$singleElement.addClass('start');
}
});
}
这篇关于当内容滚动到视图时激活CSS3关键帧动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!