wow.js 让页面滚动更有趣

五月song
887 阅读1分钟

简介

WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求

浏览器兼容

使用方法

1. 引入animate.css文件 和 wow.min.js文件

<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.min.js"></script>

2. 初始化

new WOW().init();

// 如果需要自定义配置，可以参考下面的配置
var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

3. 相关html代码如下

可以单独设置相关：
data-wow-duration（动画持续时间）
data-wow-delay（动画延迟时间）
data-wow-offset（元素的位置露出后距离底部多少像素执行）
data-wow-iteration（动画执行次数）  -  infinite无限次播放

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>使用wow做的项目</title>
		<link href="templates/cn/css/animate.css" rel="stylesheet">
		<style>
			.container {
				width: 800px;
				margin: 0 auto;
			}

			.container ul {
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}

			.container ul li {
				width: 300px;
				height: 300px;
				margin-bottom: 40px;
				list-style: none;
				border-radius: 50%;
				text-align: center;
				vertical-align: middle;
				align-items: center;
				line-height: 300px;
				background-color: pink;
				display: block;
			}

			.container ul li:nth-child(4n) {
				background-color: #409EFF;
			}

			.container ul li:nth-child(4n+1) {
				background-color: #67C23A;
			}

			.container ul li:nth-child(4n+2) {
				background-color: #E6A23C;
			}
		</style>
	</head>
	<body>
		<section class="container">
			<ul>
				<li class="wow bounceInLeft">啊啊啊</li>
				<li class="wow bounceInRight"></li>
				<li class="wow bounceIn"></li>
				<li class="wow bounceInUp"></li>
				<li class="wow bounceInDown"></li>
				<li class="wow slideInUp"></li>
				<li class="wow slideInDown"></li>
				<li class="wow slideInLeft"></li>
				<li class="wow slideInRight"></li>
				<li class="wow lightSpeedIn"></li>
				<li class="wow pulse"></li>
				<li class="wow flipInX">哦哦哦</li>
				<li class="wow flipInY"></li>
				<li class="wow bounce"></li>
				<li class="wow shake"></li>
				<li class="wow wobble"></li>
				<li class="wow rollIn"></li>
				<li class="wow fadeInUpBig" data-wow-delay="0.3s"></li>
				<li class="wow fadeInUpBig" data-wow-delay="0.6s">呃呃呃</li>
				<li class="wow fadeInUpBig" data-wow-delay="0.9s"></li>
				<li class="wow fadeInUpBig" data-wow-delay="1.2s"></li>
				<li class="wow fadeInUpBig" data-wow-delay="1.5s"></li>
			</ul>
		</section>
		<script src="templates/cn/js/wow.min.js"></script>
		<script>
			new WOW().init();
		</script>
	</body>
</html>
avatar
文章
阅读
粉丝