动画插件之Animate.css, WOW.js与scrollR
作者:
煤球快到碗里来 | 来源:发表于
2019-08-15 18:05 被阅读0次
动画插件之Animate.css, WOW.js与scrollRevealjs
1.Animate.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-AnimateCSS使用</title>
<link rel="stylesheet" href="css/animate.css">
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
/*animation-iteration-count: 3;*/
/*animation-delay: 6s;*/
}
@keyframes myFadeIn {
from {
opacity: 0;
transform: scale(2);
}
to {
opacity: 1;
transform: scale(1);
}
}
.myFadeIn {
-webkit-animation-name: myFadeIn;
animation-name: myFadeIn;
}
</style>
</head>
<body>
<!--animated这个类名是animated.css的基类, 但凡需要通过animated.css来添加动画, 都需要添加这个基类-->
<!--<div class="animated"></div>-->
<!--<div class="animated bounce"></div>-->
<!--<div class="animated bounce infinite delay-3s"></div>-->
<!--<div class="animated bounce"></div>-->
<div class="animated myFadeIn"></div>
<script>
/*
1.什么是Animate.css?
其实swiper-animate就是参考Animate.css演变出来的一个插件,
Animate.css和swiper-animate一样都是用于快速添加动画的,
所以会用swiper-animate就会用Animate.css
2.Animate.css的使用:
2.1引入animate.css的文件
2.2给需要执行动画的元素添加类名
*/
</script>
</body>
</html>
2.WOW.js
2.1 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-WOWJS使用</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.box1{
width: 200px;
height: 200px;
background: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: blue;
float: right;
}
</style>
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.js"></script>
</head>
<body>
<div class="box">
<!--
wow这个类名是一个基类, 如果想通过wow.js添加动画, 那么就必须写上这个基类
这里的slideInLeft就是Animate.css中的动画名称, 只要是Animate.css中的动画再wow.js中都可以使用
-->
<div class="box1 wow slideInLeft" data-wow-duration="5s"></div>
<div class="box2 wow slideInRight" data-wow-delay="5s" data-wow-iteration="2"></div>
</div>
<script>
/*
1.什么是WOW.js?
WOW.js是对animate.css的扩充, 让页面滚动更有趣
通过WOW.js，可以在页面滚动的过程中逐渐释放动画效果。
简单点理解: (wow.js + animate.css) 约等于 (swiper.js + swiper.animate.css)
只不过swiper更加强大, 企业中使用频率更高, 所以重点掌握swiper
2.wow.js使用
2.1引入animate.css
2.2引入wow.js
2.3给需要执行动画的元素添加类名
2.4在JavaScript中初始化wow.js
*/
new WOW().init();
</script>
</body>
</html>
2.2 位置计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-WOWJS位置计算</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 800px;
margin: 0 auto;
border: 1px solid #000;
overflow: auto;
overflow-x: hidden;
background: #fff !important;
}
div{
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
margin: 0 auto;
}
div:nth-child(odd){
background: red;
}
div:nth-child(even){
background: blue;
}
</style>
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.js"></script>
</head>
<body>
<!--
<div class="wow slideInLeft">我是第1个div</div>
<div class="wow slideInRight">我是第2个div</div>
<div class="wow slideInLeft">我是第3个div</div>
<div class="test wow slideInRight" data-wow-offset="600">我是第4个div</div>
-->
<!--这里的data-wow-offset属性的作用, 是告诉wow.js从什么位置开始执行动画
那么这个位置是参照谁的呢
// (window的高度 + 网页滚动出去的距离) - 元素距离body的偏移位
如下面js中所写
-->
<div class="box">
<div class="wow slideInLeft">我是第1个div</div>
<div class="wow slideInRight">我是第2个div</div>
<div class="wow slideInLeft">我是第3个div</div>
<div class="test wow slideInRight" data-wow-offset="600">我是第4个div</div>
<div>我是第5个div</div>
<div>我是第6个div</div>
<div>我是第7个div</div>
<div>我是第8个div</div>
<div>我是第9个div</div>
<div>我是第10个div</div>
<div>我是第11个div</div>
<div>我是第12个div</div>
<div>我是第13个div</div>
<div>我是第14个div</div>
<div>我是第15个div</div>
<div>我是第16个div</div>
</div>
<script>
// 1.拿到window的高度
let windowHeight = window.innerHeight;
// 2.拿到元素距离body的偏移位
let oDiv = document.querySelector(".test");
let divOffsetTop = oDiv.offsetTop;
// 3.拿到网页滚动出去的距离
window.onscroll = function () {
let offsetTop = document.documentElement.scrollTop;
// (window的高度 + 网页滚动出去的距离) - 元素距离body的偏移位
let result = (windowHeight + offsetTop) - divOffsetTop;
console.log(result);
}
let wow = new WOW({
/*告诉wow.js, data-wow-offset参数谁进行计算偏移位 本来是以body*/
scrollContainer: ".box"
});
wow.init();
</script>
</body>
</html>
2.3 其他使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-WOWJS高级使用</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
margin: 0 auto;
}
div:nth-child(odd){
background: red;
}
div:nth-child(even){
background: blue;
}
</style>
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.js"></script>
</head>
<body>
<div class="nj slideInLeft">我是第1个div</div>
<div class="nj slideInRight">我是第2个div</div>
<div class="nj slideInLeft">我是第3个div</div>
<div class="test nj slideInRight" data-wow-offset="600">我是第4个div</div>
<div>我是第5个div</div>
<div>我是第6个div</div>
<div>我是第7个div</div>
<div>我是第8个div</div>
<div>我是第9个div</div>
<div>我是第10个div</div>
<div>我是第11个div</div>
<div>我是第12个div</div>
<div>我是第13个div</div>
<div>我是第14个div</div>
<div>我是第15个div</div>
<div>我是第16个div</div>
<div>我是第17个div</div>
<script>
let wow = new WOW({
boxClass: 'nj', // 自定义基类的名称
animateClass: 'animated', // 指定需要使用的动画库的名称,一般不会变
offset: 0, // 在全局统一的设置元素的data-wow-offset
mobile: true, // 在移动端是否需要执行动画
live: true, // 是否需要开启异步加载内容
callback: function(box) {
// 只要有元素执行动画就会调用这个回调函数, 并且会将正在执行动画的元素传递给我们
console.log(box);
},
/*告诉wow.js, data-wow-offset参数谁进行计算偏移位*/
scrollContainer: ".box",
});
wow.init();
</script>
</body>
</html>
3.scrollRevealjs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-ScrollRevealJS</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
margin: 0 auto;
}
div:nth-child(odd){
background: red;
}
div:nth-child(even){
background: blue;
}
</style>
<script src="js/scrollreveal.js"></script>
</head>
<body>
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<div>我是第6个div</div>
<div>我是第7个div</div>
<div>我是第8个div</div>
<div>我是第9个div</div>
<div>我是第10个div</div>
<div>我是第11个div</div>
<div>我是第12个div</div>
<div>我是第13个div</div>
<div>我是第14个div</div>
<div>我是第15个div</div>
<div>我是第16个div</div>
<div>我是第17个div</div>
<div>我是第17个div</div>
<script>
/*
1.什么是scrollReveal?
scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；
2.scrollReveal特点:
2.1 同时兼容PC端和移动端
2.2 0依赖（不依赖于jQuery，也不依赖于animate.css）
2.3 定制性高，使用简单方便快捷
2.4 和animte.css, WoW一样, 不支持低版本浏览器(IE10+)
3.使用步骤:
1.引入框架
2.搭建结构体
3.创建ScrollReveal对象
4.调用ScrollReveal对象的reveal方法, 将需要执行动画的元素给它
*/
/*
4.scrollReveal配置
reset boolean true / false元素是否在容器边界内来回滚动时都产生动画效果
duration number 500 动画持续时间，单位毫秒
delay number 0 动画的延迟时间，单位毫秒
rotate object/number { x: 0, y: 0, z: 0 } 开始的角度，单位degrees
opacity number 0 开始的透明度
scale number 0.9 开始的缩放值
distance string 可用任何CSS单位值，如：’20px’,’10vw’,’5%’ 动画的距离
origin string ‘top’,’right’,’bottom’,’left’ 动画的方向
easing string ‘ease’ ‘ease-out’‘ease-in-out’‘ease-in-out’ 动画的easing效果，可以是任何有效的CSS easing值
5.scrollReveal事件
beforeReveal 动画开始之前的回调
afterReveal 动画结束时放的回调
beforeReset 动画开始被重置
afterReset 动画重置结束
什么是动画重置?
执行动画的元素离开屏幕之后就会被重置
重置就是重新设置为动画开始之前的默认样式
* */
let sr = ScrollReveal({
reset: true,
duration: 5000,
// delay: 5000,
rotate: {x: 0, y: 0, z: 45},
opacity: 0.5,
scale: 2,
distance: "500px",
origin: "left",
easing: "ease-in-out",
beforeReveal: function (ele) {
// 动画开始之前的回调
// console.log("动画开始之前", ele);
},
afterReveal: function (ele) {
// 动画结束之后的回调
// console.log("动画结束之后", ele);
},
beforeReset: function (ele) {
// 动画元素被重置之前的回到
// console.log("动画元素被重置", ele);
},
afterReset: function (ele) {
// 动画元素被重置之后的回到
console.log("动画元素被重置", ele);
},
});
sr.reveal('div');
</script>
</body>
</html>
本文标题：动画插件之Animate.css, WOW.js与scrollR
本文链接：https://www.haomeiwen.com/subject/sektsctx.html
网友评论