WOW.js配合animate.css实现网页滚动加载的动画

╰半夏微凉° 2022-10-27 01:35 9阅读 0赞

#### 此文介绍`WOW.js`配合`animate.css`做网页滚动加载的动画的用法。 ####

###### 下面是会用到的官网地址和下载地址，第一次用的时候找不到下载地址，这边以及记录下来。 ######

1、[点击查看WOW.js官网滚动加载动画演示][WOW.js]  
2、[点击去WOW.js官网][WOW.js 1]  
3、[点击去animate.css官网][animate.css]  
4、[点击去WOW.js文件下载地址][WOW.js 2]  
5、[点击去animate.css下载地址][animate.css 1]

#### 开始之前先按照第点击上面WOW.js和animate.css的下载地址，去下载`animate.css`和`wow.js`文件 ####

###### 1、在需要使用滚动加载动画的页面引入`animate.css`和`wow.js`![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70] ######

###### 2、接下开始配置动画 ######

2.1、给需要使用的动画加上`wow`这个类名，然后去animate.css官网找需要的动画效果。[点击去animate.css官网][animate.css]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70 1]  
将在animate.css官网复制到的类名加到需要使用动画的元素的class上。注意animate.css复制的的类名都是以`animate__`开口的，将类名前面的`animate__`删掉，保留后面部分，加到需要使用动画的元素的class上。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70 2]

如上图即可实现滚动加载动画。

[WOW.js]: https://www.dowebok.com/demo/131/index2.html
[WOW.js 1]: https://www.dowebok.com/131.html
[animate.css]: https://animate.style/
[WOW.js 2]: https://n459.com/file/1603944-73017626
[animate.css 1]: https://www.haorooms.com/uploads/example/Animatecss/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70]: /images/20221024/06d4b9fbe11e49a399bb7d9ec5d3dde8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70 1]: /images/20221024/49b1b26a42024e29aa31a0adb07f27c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70 2]: /images/20221024/26de3b37a40642d78109c84300d492bd.png