滚动展示动画

如果给向下滚动的页面增加一些细微的动画,这往往能给浏览者带来更好的体验。这往往可以通过触发新进入视口的元素的动画来实现。现在,我们可以通过调用库来更快更方便的实现,wow.js 和 scrollreveal.js 都是不错的选择。

wow.js

WOW.js 就是这么一个能让用户眼前一亮的 JavaScript 库。 WOW.js 依赖 animate.css,所以它支持 animate.css 的 60 多种动画效果。

安装
1
2
npm install wow.js
npm install animate.css
引入

全局引入 animate.css。在 main.ts 中添加以下代码:

1
2
import "animate.css";
import "animate.css/animate.compat.css"

在需要用到的文件中引入 wow.js。

1
import WOW from "wow.js";
使用

向一个 HTML 元素添加 .wow 类以及任意一个 animate.css 中的类。

1
2
3
4
5
6
7
8
<div class="wow slideInRight"></div>


<script>
import WOW from "wow.js";

new WOW().init();
</script>

你也可以向 HTML 元素添加其它属性:

  • data-wow-duration:动画持续时间

  • data-wow-delay:动画延迟时间

  • data-wow-offset:动画起始距离

  • data-wow-iteration:动画循环次数

wow.js 官网:https://wowjs.uk/

animate.css 官网:https://animate.style/


scrollreveal.js

安装
1
npm install scrollreveal
使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="box"></div>

<script>
import ScrollReveal from "scrollreveal";

const config = {
distance: "150%", // "50px"
origin: "right", // "left", "top", "bottom"
rotate: {
x: 30,
y: 30,
z: 30
}, // 类型为 number, 表示度数
duration: 2000,
scale: 1
}
</script>

详细内容见官网:https://scrollrevealjs.org/