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

Posted 2023-03-05

【中文标题】当内容滚动到视图中时激活 CSS3 动画

【英文标题】：Activate CSS3 animation when the content scrolls into view

【发布时间】：2013-04-25 21:29:31

【问题描述】：

我有一个使用 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 插件，但我完全没有运气让它工作。

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

谢谢！

【参考方案1】：

您不再需要捕获滚动事件

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

使用交叉口观察者。

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

【参考方案2】：

用于触发的 CSS：

<style>
    .trigger
      width: 100px;
      height: 2px;
      position: fixed;
      top: 20%;
      left: 0;
      background: red;
      opacity: 0;
      z-index: -1;
    
</style>
<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>

【参考方案3】：

除了这些答案，请考虑以下几点： 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）是无效的。

【参考方案4】：

为了激活 CSS 动画，需要在元素可见时添加一个类。正如其他答案所表明的那样，JS 是必需的，Waypoints 是一个可以使用的 JS 脚本。

Waypoints 是当您滚动至 一个元素。

直到 Waypoints 版本 2，这曾经是一个相对简单的 jquery 插件。在版本 3 及更高版本（本指南版本 3.1.1）中引入了几个功能。为了完成上述操作，可以使用脚本的'inview shortcut'：

从this link 或Github 下载并添加脚本文件（版本3 是not yet available 到CDNJS，尽管RawGit 也始终是一个选项）。

李>

像往常一样将脚本添加到您的 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 的原因。

更新了马特的小提琴here。

【讨论】：

帮了我大忙！我将它与 animate.css 一起使用

【参考方案5】：

有时您需要动画始终在元素位于视口中时出现。 如果这是您的情况，我稍微修改了 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');
    

【参考方案6】：

捕获滚动事件

这需要使用 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();
);

【讨论】：

非常好的一个，不幸的是，当元素在视口中并且我们刷新页面时，它似乎不适用于 Firefox。

@Wtower 对于类似的事情，我将事件绑定到多个事件： $(window).on('scroll scrollstart touchmoveorientationchange resize') 你当然可以向其中添加 'load' 事件。

var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 的代码区别对于 Chrome v70 不再有效。