Animate.css：在滚动时变为可见时触发动画

Question

我正在尝试使用 animate.css。

我的代码：

<h2 class="lazyload animate__animated animate__rotateInDownLeft" data-link="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">Lorem ipsum</h2>

请不要害怕 animate.css 在这里被懒加载。

我的页面：https://galina.xyz/makiyazh/oshibki-pri-makiyazh

我们对带有文本“Lorem ipsum”的最底部的 h2 感兴趣。

问题

当我用 h2 重新加载屏幕时，这非常有效。那是它已经可见的时候。

但我正在寻找的是滚动时的动画效果。也就是说，H2 只有在滚动到时才会开始移动。

有可能吗？

Answer 1

animate.css 库中没有这样的功能，你需要使用 javascript/Jquery 做一些调整和技巧，得到你想要的。

我几天以来一直在研究这样的库，并设法以某种方式制作了一个稳定的库。

访问animate-dynamic.ga

Github animate-dynamic

如有任何疑问，请发表评论。

对于图书馆的任何困难，请随时创建问题。

Answer 2

似乎 animate.css 不提供动画滚动功能，这通常需要 javascript。因此，您最好添加自己的 window.scroll 事件，该事件会检查您的 h2 是否在视口中可见，然后添加类 animate__rotateInDownLeft。