当内容滚动到视图时激活CSS3动画 [英] Activate CSS3 animation when the content scrolls into view

问题描述

我有一个条形图，可以动画CSS3和动画当前页面加载。

我有的问题是给定的条形图被放置

我正在寻找通过CSS3或jQuery的方式，这是因为在用户滚动到它之前，只有在查看器看到图表时才激活条形图上的CSS3动画。

 < div&它填充屏幕的高度，然后一些< / div> 
< div>动画栏聊天在这里< / div> 
  

如果您在网页加载后向下滚动得非常快，您可以看到它的动画效果。

这是我的代码的 jsfiddle 。此外，我不知道这是否重要，但我有几个这个条形图的页面上的实例。

我遇到一个称为waypoint的jQuery插件，但我绝对没有运气让它工作。

如果有人可以指出正确的方向，这将是非常有帮助的。

谢谢！ p>

解决方案

捕获滚动事件

这需要使用JavaScript或jQuery捕获滚动事件，检查每次滚动事件触发以查看元素是否在视图中。

一旦元素在视图中，启动动画。在下面的代码中，这是通过向元素添加一个start类来触发动画来实现的。

更新演示

HTML
$ b

 < div class =bar> 
< div class =level eighty> 80％< / div> 
< / div> 
  

CSS

  .eighty.start {
 width：0px; 
 background：＃aae0aa; 
 -webkit-animation：eighty 2s ease-out forward; 
 -moz-animation：eighty 2s ease-out forward; 
 -ms-animation：eighty 2s ease-out forward; 
 -o-animation：eighty 2s ease-out forward; 
动画：八十二秒缓解前进; 
} 
  

jQuery

  function isElementInViewport（elem）{
 var $ elem = $（elem）; 
 
 //获取页面的滚动位置。 
 var scrollElem =（（navigator.userAgent.toLowerCase（）。indexOf（'webkit'）！= -1）？'body'：'html'）; 
 var viewportTop = $（scrollElem）.scrollTop（）; 
 var viewportBottom = viewportTop + $（window）.height（）; 
 
 //获取页面上元素的位置。 
 var elemTop = Math.round（$ elem.offset（）。top）; 
 var elemBottom = elemTop + $ elem.height（）; 
 
 return（（elemTop< viewportBottom）&&（elemBottom> viewportTop））; 
} 
 
 //检查是否是开始动画的时间。 
 function checkAnimation（）{
 var $ elem = $（'。bar .level'）; 
 
 //如果动画已经开始
 if（$ elem.hasClass（'start'））return; 
 
 if（isElementInViewport（$ elem））{
 //开始动画
 $ elem.addClass（'start'）; 
} 
} 
 
 //捕获滚动事件
 $（window）.scroll（function（）{
 checkAnimation（）; 
 }）; 
  

I have a bar chart that animates with CSS3 and the animation currently activates as the page loads.

The problem I have is that the given bar chart is placed off screen due to lots of content before it so by the time a user scrolls down to it, the animation has already finished.

I was looking for ways either through CSS3 or jQuery to only activate the CSS3 animation on the bar chart when the viewer sees the chart.

<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>

If you scroll down really fast right after page load, you can see it animating.

Here is a jsfiddle of my code. Also, I dont know if this matters, but I have several instances of this bar chart on the page.

I have come across a jQuery plug-in called waypoint but I had absolutely no luck getting it to work.

If someone could point me in the right direction, it would be really helpful.

Thanks!

解决方案

Capture scroll events

This requires using JavaScript or jQuery to capture scroll events, checking each time a scroll event fires to see if the element is in view.

Once the element is in view, start the animation. In the code below, this is done by adding a "start" class to the element, that triggers the animation.

Updated demo

HTML

<div class="bar">
    <div class="level eighty">80%</div>
</div>

CSS

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

jQuery

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 = $('.bar .level');

    // 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();
});

这篇关于当内容滚动到视图时激活CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！