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>

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

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

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

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

谢谢！

Answer 1

捕获滚动事件

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

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

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

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'：

从this link或Github下载并添加脚本文件（版本3为not yet available至CDNJS，但RawGit始终为here选项也是。）

照常将脚本添加到HTML中。

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

添加以下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()出于here解释的原因。

更新了马特的小提琴the official tutorial。

Answer 4

您不再需要捕获滚动事件

从2020年开始，每个浏览器都可以通知元素在您的视口中是否可见。

使用路口观察员。

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

Answer 5

除了这些答案，请考虑以下几点：

1-检查视图中的元素有许多注意事项：
How to tell if a DOM element is visible in the current viewport?

2-如果有人想要更多地控制动画（例如设置“动画类型”和“启动延迟”），这里有一篇很好的文章：
http://blog.webbb.be/trigger-css-animation-scroll/

3-而且似乎无延迟地调用 addClass （使用 setTimeout ）无效。

Answer 6

CSS FOR TRIGGER : 
.trigger{
  width: 100px;
  height: 2px;
  position: fixed;
  top: 20%;
  left: 0;
  background: red;
  opacity: 0;
  z-index: -1;
}
<script>
$('body').append('<div class="trigger js-trigger"></div>');

        $(document).scroll(function () {


           $('YOUR SECTIONS NAME').each(function () {

               let $this = $(this);

               if($this.offset().top <= $('.js-trigger').offset().top) {

                   if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
                       $this
                           .addClass('currSec')
                           .siblings()
                           .removeClass('currSec');

                   }
               }

           });

        });
</script>

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

6 个答案:

捕获滚动事件