wow.js 搭配 animate.css 实现网页动起来

Fork Me On Github

原由

这篇教程只是给前端看的,简单介绍如何简单实现网页动起来效果。

准备

WOW.js官方示例

Animate.css官方示例

使用

  1. 在页面引入js、css文件
html
   
<link rel="stylesheet" href="animate.min.css">

<script src="wow.min.js"></script>
123
  1. 启动wow.js,配置样式
html
         
<style>
.wow { 
    visibility: hidden; 
}
</style>

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

说明:class wow 是wow.js 默认的标记,加上了这个,那这个元素就会动起来,必须设置样式为不可见,才能起到滚动到视窗出现突然出现的效果。

  1. 修改需要动画的元素
html
   

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
123

说明:

class wow 是wow.js 默认的标记,可以修改。

class slideInLeft 是 Animate.css 的其中一种动画绑定的class。

data-wow-duration 是指动画执行时间,可以不设,Animate.css 自带默认

data-wow-delay 是指延迟多久执行动画,可以不设,Animate.css 自带默认

最终页面

html
               
<link rel="stylesheet" href="animate.min.css">
<style>
.wow { 
    visibility: hidden; 
}
</style>

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>

<section class="wow slideInLeft"></section>

<script src="wow.min.js"></script>
<script>
new WOW().init();
</script>
123456789101112131415
点击查看全文
0 572 0