【问题标题】:Animate.css lazy load on scrollAnimate.css 在滚动时延迟加载
【发布时间】:2023-02-19 18:46:41
【问题描述】:

我正在尝试在 div 上制作动画,仅当使用 Animate.css 将 div 滚动到视点时才加载该动画。其他库,比如“AOS”,已经内置了这个选项

<div data-aos="fade-up">
    <!-- any text here -->
</div>

我想应用相同但使用Animate.css。可以在 my website 上查看 AOS 库已经实现的功能

【问题讨论】:

  • 为此你需要 JS。阅读有关 IntersectionObserver 的内容:当您的元素与视口相交 x 量时,您将类添加到它。

标签: html css animation animate.css


【解决方案1】:

在 Animate.css 库中没有直接的方法可以做到这一点,您必须使用 Javascript。

盒子外面,我制作了一个名为 Animate.css-dynamic 的库,它允许您随时为元素设置动画。您可以使用 Animate.css 中定义的任何动画。

Demo

Github

【讨论】:

    猜你喜欢
    • 2019-11-12
    • 2013-10-27
    • 2011-01-11
    • 2012-08-08
    • 1970-01-01
    • 2023-03-24
    • 1970-01-01
    • 2020-04-08
    • 2014-09-08
    相关资源
    最近更新 更多