我正在尝试使用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应该开始移动,只有当它已经滚动到。
有可能吗?
3条答案
按热度按时间9bfwbjaz1#
@Mohammed动画-使用jQuery的动态解决方案。
这是一个简单的普通JS解决方案,使用Animate.css、Waypoints和几行css:
浏览器:
CSS:
网页:
任何改进都是受欢迎的!)
jw5wzhpr2#
css似乎没有提供滚动动画功能,这通常需要javascript,所以你最好添加你自己的
window.scroll
事件,它检查你的h2
是否在视口中可见,然后添加animate__rotateInDownLeft
类。7cwmlq893#
在animate.css库中没有这样的特性,你需要使用javascript/Jquery做一些调整和技巧,得到你想要的。
我在这样的图书馆工作了几天,并设法以某种方式使一个稳定的图书馆。
访问animate-dynamic.ga
Github animate-dynamic处理器
对于任何疑问,请注解。
对于图书馆的任何困难,请随时创建问题。