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

此文介绍WOW.js配合animate.css做网页滚动加载的动画的用法。
下面是会用到的官网地址和下载地址,第一次用的时候找不到下载地址,这边以及记录下来。

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

开始之前先按照第点击上面WOW.js和animate.css的下载地址,去下载animate.csswow.js文件
1、在需要使用滚动加载动画的页面引入animate.csswow.jsWOW.js配合animate.css实现网页滚动加载的动画_第1张图片
2、接下开始配置动画

2.1、给需要使用的动画加上wow这个类名,然后去animate.css官网找需要的动画效果。点击去animate.css官网
WOW.js配合animate.css实现网页滚动加载的动画_第2张图片
将在animate.css官网复制到的类名加到需要使用动画的元素的class上。注意animate.css复制的的类名都是以animate__开口的,将类名前面的animate__删掉,保留后面部分,加到需要使用动画的元素的class上。
WOW.js配合animate.css实现网页滚动加载的动画_第3张图片

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

你可能感兴趣的:(css动画)