animate.css
- animate.css是一个来自国外的CSS3动画库，它预设了抖动（shake）、闪烁（flash）、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达70多种动画特效，几乎包含了所有常见的动画特效
- 网站: https://github.com/daneden/animate.css
- 步骤
- 引入animate.css的文件
- 给需要执行动画的元素添加类名
- animated infinite bounce delay-2s
- 第一个animated是一个基类, 只要元素需要执行动画就必须添加这个类型
- 第二个infinite是动画执行的次数, 默认只执行一次, infinite可以无限执行, 此类名是可选的
- 第三个bounce是动画名称
- 第四个delay-xx, 延迟时间, 此类名是可选的
- 框架的定制:
- 所有的CSS框架都可以随意定义, 但是一定要注意不要直接修改框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-animate基本使用</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
}
.animated.delay-1s {
-webkit-animation-delay: 5s !important;
animation-delay: 5s !important;
}
</style>
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="animated infinite flip delay-1s"></div>
Wow.js
- 对animate.css的扩充, 可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果, 让页面滚动更有趣
- 地址: https://github.com/matthieua/WOW
- 使用步骤:
- WOW.JS基本使用
- 引入animate.css
- 引入wow.js
- 给需要执行动画的元素添加类名
- 在JavaScript中初始化wow.js
- wow slideInLeft
- 第一个参数: 是一个基类, 需要需要执行动画必须添加这个类
- 第二个参数: 动画的名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-wow基本使用</title>
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.box>div{
width: 200px;
height: 200px;
background: red;
}
.box>div:nth-child(2){
background: blue;
}
.f-left{
float: left;
}
.r-right{
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="f-left wow slideInLeft" data-wow-delay="2s"></div>
<div class="r-right wow slideInRight" data-wow-iteration="3"></div>
</div>
<script>
new WOW().init();
</script>
</body>
</html>
window.addEventListener('load', function (ev) {
var wow = new WOW(
{
boxClass: 'test', // 需要执行动画的元素的 class (default is wow)
animateClass: 'animated', // animation.css 动画的 class (default is animated)
offset: 600, // 距离可视区域多少开始执行动画 (default is 0)
mobile: true, // 是否在移动设备上执行动画 (default is true)
live: true, // 异步加载的内容是否有效 (default is true)
callback: function(box) {
// 每次动画启动时都会触发回调
// 传入的参数是正在动画的DOM节点
},
scrollContainer: null // 滚动容器选择器，默认使用窗口
}
);
wow.init();
});
scrollReveal
- scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次
- 使用步骤:
- 引入框架
- 搭建结构体
- 创建ScrollReveal对象
- 调用ScrollReveal对象的reveal方法, 将需要执行动画的元素给它
var sReveal = ScrollReveal();
sReveal.reveal('做动画的选择器', {
reset: true, // 重置动画, 开启滚动时往返都有动画, 默认只有向下滚动有动画
duration: 3000, // 动画持续的时间
delay: 0, // 动画延迟时间
rotate: {x: 0, y: 0, z: 45}, // 指定过渡的角度
opacity: 0.2, // 初始化透明度
scale: 0.8, // 初始化缩放比例
distance: "500px", // 初始化默认的偏移位
origin: "bottom", // 初始化默认偏移位的方向
easing: "ease-in-out", // 指定动画的运动方式(匀速/缓动)
beforeReveal: function () {
// 动画开始之前的回调
// console.log("动画开始");
},
afterReveal: function () {
// 动画结束时放的回调
// console.log("动画结束");
},
beforeReset: function () {
// 动画开始被重置
// 什么是动画重置?
// 执行动画的元素离开屏幕之后就会被重置
// 重置就是重新设置为动画开始之前的默认样式
console.log("动画开始被重置");
},
afterReset: function () {
// 动画重置结束
console.log("动画重置结束");
}
});
