让css3动画变得有趣wowjs
2018-07-25 本文已影响72人
zhaoolee
- wowjs可以在网页滚动时, 展示css动画,是animater的好朋友, wowjs官方实例演示链接: https://mynameismatthieu.com/WOW/
animate.css 包含了一组炫酷、有趣、跨浏览器的动画，可以在你的项目中直接使用。
使用方法
1. 在页面头部引入, animate.css和wow.js, cdn地址如下:
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
2. 在需要添加动画的html元素上, 新增两个类属性, 第一个为wow, 第二个为动画名如从左侧滑入slideInLeft
<p class="wow slideInLeft">从左边滑入的动画</p>
3. 添加动画控制, 主要控制四个属性:
- data-wow-duration: 动画持续时间
- data-wow-delay: 动画开始之前的延迟播放的时间
- data-wow-offset: 元素距离底部大于此数值时,开始播放动画
- data-wow-iteration: 动画重复的次数
<!--动画持续时间为2秒, 动画开始之前的延迟播放的时间为5s 元素底部距离浏览器底部400像素时开始播放动画, 动画重复次数为2次-->
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">从左边滑入的动画</p>
4. 在html底部添加初始化语句
<script>
wow = new WOW(
{
boxClass: 'wow', // 默认属性名
animateClass: 'animated', // 默认触发的动画类(包含在animate css中)
offset: 0, // 为所有添加wow的元素设置 data-wow-delay属性 的默认值
mobile: true, // 是否在移动设备中开启动画
live: true // 持续监测页面中是否插入新的wow元素
}
);
wow.init();
</script>
小技巧: 在animater中大多数动画名都是"见名知意"的, 在这里可以在线查看: https://cdn.bootcss.com/animate.css/3.5.2/animate.css, 具体用法可以查看下面简单的小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wow动画</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
</head>
<style>
p {
font-size: 50px;
text-align: center;
color:#64B587;
line-height: 100px;
}
section {
width: 800px;
font-size: 30px;
color: #A84631;
text-align: center;
line-height:60px;
margin: 0 auto;
}
section div {
height: 100px;
line-height: 100px;
}
</style>
<body>
<p class="wow slideInLeft">
将进酒
</p>
<section >
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">
君不见黄河之水天上来，奔流到海不复回。<br>
</div>
<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s">
君不见高堂明镜悲白发，朝如青丝暮成雪。<br>
</div>
<div class="wow bounceOutUp" data-wow-duration="2s" data-wow-delay="1s">
人生得意须尽欢，莫使金樽空对月。<br>
</div>
<div class="wow fadeIn">
天生我材必有用，千金散尽还复来。<br>
</div>
<div class="wow fadeInDown">
烹羊宰牛且为乐，会须一饮三百杯。<br>
</div>
<div class="wow fadeInLeft">
岑夫子，丹丘生，将进酒，杯莫停。<br>
</div>
<div class="wow fadeInLeftBig">
与君歌一曲，请君为我倾耳听：<br>
</div>
<div class="wow fadeOutRightBig">
钟鼓馔玉不足贵，但愿长醉不复醒。<br>
</div>
<div class="wow flipInX">
古来圣贤皆寂寞，惟有饮者留其名。<br>
</div>
<div class="wow flipOutY">
陈王昔时宴平乐，斗酒十千恣欢谑。<br>
</div>
<div class="wow lightSpeedIn">
主人何为言少钱，径须沽取对君酌。<br>
</div>
<div class="wow rotateIn">
五花马，千金裘，<br>
</div>
<div class="wow rotateInUpLeft">
呼儿将出换美酒，与尔同销万古愁。<br>
</div>
</section>
<!--动画持续时间为2秒, 动画开始之前的延迟播放的时间为5s 元素底部距离浏览器底部400像素时开始播放动画, 动画重复次数为2次-->
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">End</p>
</body>
<script>
wow = new WOW(
{
boxClass: 'wow', // 默认属性名
animateClass: 'animated', // 默认触发的动画类(包含在animate css中)
offset: 0, // 为所有添加wow的元素设置 data-wow-delay属性 的默认值
mobile: true, // 是否在移动设备中开启动画
live: true // 持续监测页面中是否插入新的wow元素
}
);
wow.init();
</script>
</html>
小结:
animater可以增加网页的动感效果,动画的效果和ppt类似, 如果你肯花时间, 用animater做出好看的在线ppt效果也是完全可以做到的~
