滚动展示动画

发表于 分类于 阅读次数：

如果给向下滚动的页面增加一些细微的动画，这往往能给浏览者带来更好的体验。这往往可以通过触发新进入视口的元素的动画来实现。现在，我们可以通过调用库来更快更方便的实现，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/。