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

问题描述

我有一个使用 CSS3 制作动画的条形图，当前动画在页面加载时激活.

我遇到的问题是，由于前面有很多内容，给定的条形图放置在屏幕外，因此当用户向下滚动到它时，动画已经完成.

我一直在寻找通过 CSS3 或 jQuery 仅在查看者看到图表时激活条形图上的 CSS3 动画的方法.

这里有很多内容，它填满了屏幕的高度，然后一些
<div>动画栏聊天在这里</div>

如果您在页面加载后立即快速向下滚动，您可以看到它的动画效果.

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

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

如果有人能指出我正确的方向，那将非常有帮助.

谢谢！

解决方案

捕获滚动事件

这需要使用 JavaScript 或 jQuery 来捕获滚动事件，并在每次触发滚动事件时检查该元素是否在视图中.

一旦元素在视图中，开始动画.在下面的代码中，这是通过向元素添加一个开始"类来完成的，它会触发动画.

更新演示

HTML

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

CSS

.eighty.start {宽度:0px；背景:#aae0aa；-webkit-animation:八十个 2s 缓出前进；-moz-animation:八十个 2s 缓出前进；-ms-animation:八十个 2s 缓出前进；-o-animation:八十个 2s 缓出前进；动画:八十个 2 秒缓出；}

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));}//检查是否是时候开始动画了.函数检查动画(){var $elem = $('.bar .level');//如果动画已经开始if ($elem.hasClass('start')) 返回；如果(isElementInViewport($elem)){//开始动画$elem.addClass('开始');}}//捕获滚动事件$(窗口).滚动(功能(){检查动画()；});

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屋！