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

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

问题

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

但我想要的是滚动时的动画效果。也就是说，H2 应该只有在滚动到时才开始移动。

可能吗？

Answer 1

似乎 animate.css 没有提供通常需要 javascript 的动画滚动功能。所以你最好添加自己的 window.scroll 事件，它会检查你的 h2 是否在视口中可见，然后添加 class animate__rotateInDownLeft.

Answer 2

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

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

访问animate-dynamic.ga

Github animate-dynamic

如有任何疑问，请在下方评论。

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