动画插件之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>
