Animate.css本身不支持滚动动画,但可以使用其他JavaScript库(如wow.js、scrollreveal.js)来实现滚动动画。以下是使用wow.js库进行滚动动画的代码示例:
首先,将wow.js和animate.css库链接到HTML文件中:
接下来,在JavaScript文件中初始化wow.js来启用滚动动画效果:
new WOW().init();
然后,在需要具有滚动动画的HTML元素中添加"data-wow-duration"和"data-wow-delay"属性。例如,以下代码将在元素滚动到屏幕中央时以1.5秒的持续时间,0.5秒的延迟时间使用animate.css库中的"fadeInUp"类:
Hello world
这样就完成了一个带有滚动动画的元素。可以尝试在页面中滚动并看到动画效果。