当内容滚动到视图时激活CSS3动画

Question

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

我遇到的问题是给定的条形图由于之前的大量内容而被放置在屏幕外,所以当用户向下滚动到它时,动画已经完成.

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

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

如果你在页面加载后立即向下滚动,你可以看到它动画.

这是我的代码的一个小问题.另外,我不知道这是否重要,但我在页面上有几个这个条形图的实例.

我遇到了一个名为waypoint的jQuery插件,但我完全没有运气.

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

谢谢!

Answer 1

捕获滚动​​事件

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

元素在视图中后,启动动画.在下面的代码中,这是通过向元素添加"start"类来触发动画来完成的.

更新的演示

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

Answer 2

有时,当元素位于视口中时,您总是需要动画.如果这是你的情况,我稍微修改了Matt jsfiddle代码以反映这一点.

jQuery的

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    } else {
        $elem.removeClass('start');
    }
}

Answer 3

为了激活CSS动画,当一个类变得可见时,需要将该类添加到该元素中.正如其他答案所指出的那样,JS是必需的,Waypoints是一个可以使用的JS脚本.

当您滚动到元素时,Waypoints是触发函数的最简单方法.

至于Waypoints版本2,这曾经是一个相对简单的jquery插件.在版本3及更高版本(本指南3.1.1版)中,引入了几个功能.为了完成上述操作,可以使用脚本的"inview shortcut":

1. 从此链接或Github下载并添加脚本文件(版本3 尚未通过CDNJS提供,尽管RawGit也是一个选项).

2. 像往常一样将脚本添加到HTML中.

   <script src="/path/to/lib/jquery.waypoints.min.js"></script>
   <script src="/path/to/shortcuts/inview.min.js"></script>
   

3. 添加以下JS代码,替换#myelement为相应的HTML元素jQuery选择器:

   $(window).load(function () {
       var in_view = new Waypoint.Inview({
           element: $('#myelement')[0],
           enter: function() {
               $('#myelement').addClass('start');
           },
           exit: function() {  // optionally
               $('#myelement').removeClass('start');
           }
       });
   });
   

我们使用这里$(window).load()解释的原因.

更新了马特的小提琴这里.

Answer 4

您不再需要捕获滚动事件

自 2020 年以来，每个浏览器都能够通知元素是否在您的视口中可见。

与交点观察者。

我在这里发布了代码：https : //stackoverflow.com/a/62536793/5390321