【问题标题】:Animate.css: trigger animation when becoming visible while scrollingAnimate.css:在滚动时变为可见时触发动画
【发布时间】:2021-10-13 21:36:52
【问题描述】:

我正在尝试使用 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 只有在滚动到时才会开始移动。

有可能吗?

【问题讨论】:

    标签: css animate.css


    【解决方案1】:

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

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

    访问animate-dynamic.ga

    Github animate-dynamic

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

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

    【讨论】:

      【解决方案2】:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-11-10
        相关资源
        最近更新 更多