wow.js 是一个能够使页面元素在滚动到可见区域时(或者其他条件满足时)播放动画效果的 JavaScript 库。它可以使页面看起来更加生动,吸引用户的注意力,提升用户体验。
使用 wow.js 很简单,只需要在页面中引入 wow.js 和 animate.css,然后初始化 wow.js 即可。
1. 在页面 head 标签中引入 wow.js 和 animate.css:
“`html
“`
2. 给要添加动画效果的元素添加 CSS 类名(使用 animate.css 中的类名),并加上 wow 和 animation-* 两个类名,例如:
“`html
“`
这里使用了 animate.css 中的 bounceInLeft 动画效果,同时添加了 wow 和 animation-bounceInLeft 两个类名。
3. 在页面底部初始化 wow.js:
“`html
new WOW().init();
“`
这样,在页面滚动到这个 div 元素所在区域时,就会触发 bounceInLeft 动画效果。
完整代码示例:
“`html
Hello World!
new WOW().init();
“`
当浏览器窗口滚动到这个 div 元素的位置时,就会触发 bounceInLeft 的动画效果。wow 和 animate.css 结合使用,可以方便地给页面元素添加动画效果,让页面更加生动有趣。