WOW.js：依赖animate.js做页面滚动

图示

核心功能

让页面滚动更有趣
通过WOW.js，可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说：当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐展示出来。

特点

轻量级类库，不依赖jQuery，超简单的安装和使用，与animate.css配合，只需要短短几行代码就可以实现很多特效。
容易定制，我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。

兼容性

WOW.js要和animate.css配合使用，所有其也只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

官网

https://www.delac.io/wow/

如何使用？

基本用法

// 引入文件
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>// 在相对的HTML标签中通过类进行引用
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>// 在JavaScript中进行初始化
new WOW().init();

常用的属性

data-wow-delay: 动画开始前延迟
data-wow-duration: 动画持续时长
data-wow-iteration: 动画重复次数
data-wow-offset: 距离浏览器底部到隐藏框顶部的距离（偏移量）
data-wow-offset：用于决定当前的元素在滚动的时候到达怎样的位置出现（是在滚动之前出现、滚动之后出现，还是滚动的时候出现）

data-wow-offset = scroll + 浏览器高度 - 元素头部到文档顶部高度
= 绿色 + 紫色 - 红色

WOW的默认配置参数

var wow = new WOW({boxClass: 'wow', // 动画元素的CSS类（默认类名wow）animateClass:'animated', // 动画CSS类 （默认类名animated）offset: 0, // 距离可视区域多少开始执行动画（默认为0）mobile: true, // 是否在移动设备上执行动画 （默认是true）
});wow.init();

WOW.js存在怎样的问题？

WOW.js实例的动画只能加载一次，如果要重新执行动画必须要进行刷新。
但是在实际开发中，更多时候动画是只加载一次，否则会造成视觉错乱。那如果要多次重复展现动画该如何处理呢？

WOW初体验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="css/animate.css"><title></title><style>*{margin: 0;padding: 0;list-style: none;border: none;}.box{width: 900px;margin: 20px auto;overflow: hidden;border: 1px solid red;}.box div{width: 450px;height: 300px;}.box div:nth-child(1){background-color: green;float: left;}.box div:nth-child(2){background-color: red;float: right;}</style>
</head>
<body><div class="box"><div class="wow flash"></div><div class="wow flip"></div></div>
<script src="js/wow.js"></script>
<script>window.addEventListener('load', function () {new WOW().init();});
</script>
</body>
</html>

WOW参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="css/animate.css"><title></title><style>*{margin: 0;padding: 0;list-style: none;border: none;}.box{width: 900px;margin: 20px auto;overflow: hidden;border: 1px solid red;}.box div{width: 450px;height: 300px;}.box div:nth-child(1){background-color: green;float: left;}.box div:nth-child(2){background-color: red;float: right;}</style>
</head>
<body><div class="box"><div class="wow slideInLeft" data-wow-delay="1s"></div><div class="wow slideInRight" data-wow-duration="1s" data-wow-iteration="3"></div></div>
<script src="js/wow.js"></script>
<script>window.addEventListener('load', function () {new WOW().init();});
</script>
</body>
</html>

scrollReveal.js

图示

基本概念

scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；
官网
① https://scrollrevealjs.org/
② https://github.com/scrollreveal/scrollreveal

特点

scrollReveal同时兼容PC端和移动端
0依赖（不依赖于jQuery，也不依赖于animate.css）
定制性高，使用简单方便快捷

浏览器兼容

虽然scrollReveal.js不依赖于animate.css，但是它的动画也是用CSS3创建的，所以依然需要支持HTML5和CSS3比较好的浏览器，比如： IE10+、Firefox、Chrome、Opera、Safari。

使用方式

基本使用

// 引入文件
<script src="js/scrollReveal.js"></script>// html
<div class="box"></div>// JavaScript
window.onload = function () {window.sr = ScrollReveal();sr.reveal('.box');
}

常用参数

 var config = {reset: false, // 滚动鼠标时，动画开关origin: 'bottom', // 动画开始的方向duration: 500, // 动画持续时间delay: 0, // 延迟rotate: {x:0, y:0, z:0}, // 过度到0的初始角度opacity: 0, // 初始透明度scale: 0.9, //缩放easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)', // 缓动'ease', 'ease-in-out'，'linear'...// 回调函数beforeReveal: function(domEl){},beforeReset: function(domEl){},afterReveal: function(domEl){},afterReset: function(domEl){}
};window.sr = ScrollReveal();
sr.reveal('.sr', config);

scrollReveal 和 WOW的区别和联系

它们都不依赖jQuery；
wow依赖于animate.css ，ScrollReveal不依赖任何其他插件或者库；
wow的释放动画，只能够实现一次，而ScrollReveal可以无限次使用；
ScrollReveal 参数相对比较多，比较复杂些；
实际工作中，用wow比较多。

scrollReveal 初体验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;border: none;}ul{width: 980px;margin: 0 auto;overflow: hidden;}ul li{width: 200px;height: 300px;background-color: green;margin: 10px;float: left;}</style>
</head>
<body>
<ul><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li>
</ul><script src="js/scrollreveal.min.js"></script>
<script>window.onload = function () {ScrollReveal().reveal('.sr', {reset: true, // 滚动鼠标时，动画开关origin: 'right', // 动画开始的方向duration: 1000, // 动画持续时间delay: 0, // 延迟rotate: {x:0, y:0, z:0}, // 过度到0的初始角度opacity: 0.3, // 初始透明度scale: 0.4, //缩放easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)', // 缓动'ease', 'ease-in-out'，'linear'...// 回调函数beforeReveal: function(domEl){},beforeReset: function(domEl){},afterReveal: function(domEl){},afterReset: function(domEl){}});}
</script>
</body>
</html>

利用ScrollReveal.js实现瀑布流

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;border: none;}.box{width: 1230px;margin: 0 auto;overflow: hidden;}.box>ul{width: 300px;float: left;margin-right: 10px;}.box>ul:last-child{margin-right: 0;}</style>
</head>
<body><div class="box"><ul><li class="sr"><img src="data:images/01.jpg" alt=""></li><li class="sr"><img src="data:images/02.jpg" alt=""></li><li class="sr"><img src="data:images/03.jpg" alt=""></li><li class="sr"><img src="data:images/04.jpg" alt=""></li><li class="sr"><img src="data:images/05.jpg" alt=""></li><li class="sr"><img src="data:images/06.jpg" alt=""></li><li class="sr"><img src="data:images/07.jpg" alt=""></li><li class="sr"><img src="data:images/08.jpg" alt=""></li><li class="sr"><img src="data:images/09.jpg" alt=""></li><li class="sr"><img src="data:images/10.jpg" alt=""></li></ul><ul><li class="sr"><img src="data:images/11.jpg" alt=""></li><li class="sr man"><img src="data:images/12.jpg" alt=""></li><li class="sr"><img src="data:images/13.jpg" alt=""></li><li class="sr"><img src="data:images/14.jpg" alt=""></li><li class="sr"><img src="data:images/15.jpg" alt=""></li><li class="sr"><img src="data:images/16.jpg" alt=""></li><li class="sr"><img src="data:images/17.jpg" alt=""></li><li class="sr"><img src="data:images/18.jpg" alt=""></li><li class="sr"><img src="data:images/19.jpg" alt=""></li><li class="sr"><img src="data:images/20.jpg" alt=""></li></ul><ul><li class="sr"><img src="data:images/21.jpg" alt=""></li><li class="sr"><img src="data:images/22.jpg" alt=""></li><li class="sr"><img src="data:images/23.jpg" alt=""></li><li class="sr"><img src="data:images/24.jpg" alt=""></li><li class="sr"><img src="data:images/25.jpg" alt=""></li><li class="sr"><img src="data:images/26.jpg" alt=""></li><li class="sr"><img src="data:images/27.jpg" alt=""></li><li class="sr"><img src="data:images/28.jpg" alt=""></li><li class="sr"><img src="data:images/29.jpg" alt=""></li><li class="sr"><img src="data:images/30.jpg" alt=""></li></ul><ul><li class="sr"><img src="data:images/31.jpg" alt=""></li><li class="sr"><img src="data:images/32.jpg" alt=""></li><li class="sr"><img src="data:images/33.jpg" alt=""></li><li class="sr"><img src="data:images/34.jpg" alt=""></li><li class="sr"><img src="data:images/35.jpg" alt=""></li><li class="sr"><img src="data:images/36.jpg" alt=""></li><li class="sr"><img src="data:images/37.jpg" alt=""></li><li class="sr"><img src="data:images/38.jpg" alt=""></li><li class="sr"><img src="data:images/39.jpg" alt=""></li><li class="sr"><img src="data:images/40.jpg" alt=""></li></ul></div><script src="js/scrollreveal.min.js"></script><script>window.onload = function () {window.sr = ScrollReveal();sr.reveal('.sr', {reset: true, // 滚动鼠标时，动画开关});sr.reveal('.man', {reset: true, // 滚动鼠标时，动画开关origin: 'right', // 动画开始的方向duration: 500, // 动画持续时间delay: 500, // 延迟rotate: {x:100, y:100, z:100}, // 过度到0的初始角度opacity: 0.3, // 初始透明度scale: 3, //缩放})}</script>
</body>
</html>

利用ScrollReveal.js实现序列帧动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;border: none;}.box{width: 980px;margin: 0 auto;overflow: hidden;}.box li{width: 50px;height: 50px;background-color: #ccc;margin: 10px;float: left;}</style>
</head>
<body>
<ul class="box"><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li><li class="sr"></li>
</ul><script src="js/scrollreveal.min.js"></script><script>window.onload = function () {window.sr = ScrollReveal();sr.reveal('.sr', {reset: true, // 滚动鼠标时，动画开关origin: 'left', // 动画开始的方向duration: 500, // 动画持续时间}, 100);}</script>
</body>
</html>

WOW、ScrollReveal：WOW.js和ScrollReveal.js基础学习相关推荐

js src 变量_Js基础学习笔记（一）
Js的书写位置 1.内联写在标签的属性内行为执行只能通过行为主动触发,不方便使用 2.内部 script包裹js代码,双标签跟随页面的加载,按照顺序执行 3.外部 script的src属性引入 ...
Angular Chart.js第三方库ng-chartjs基础使用
Angular Chart.js第三方库ng-chartjs基础使用项目github地址这个项目支持基本的Chart.js图表,并且支持内联插件和全局插件的使用. Demo地址支持图表类型 li ...
vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
【Vue.js 知识量化】基础语法
Vue.js 基础语法 Vue.js 安装插值操作 Mustache:将 data 中的文本数据插入到 HTML v-once:使元素和组件只渲染一次 v-html:解析 HTML 并展示 v-t ...
js 计算精确度问题——基础积累
js计算精确度问题--基础积累最近在写一个后台管理系统时,遇到一个问题. 场景:输入三个值,计算三个值的和. 然后就遇到了上图中的js精确度的问题. 然后在浏览器控制台复现了.这个是js精确度的问题 ...
Js逆向教程20-Hook基础
Js逆向教程19-Hook基础一.jshook Hook就是在这些流程任意环节插入自己的代码,让浏览器先执行自己的代码然后再执行原本网站的 hook在以下流程中可以做的事情: 1.1 html流程 ...
前端之JS篇(一)——计算机基础JS简介
1.计算机基础 1.1 编程语言编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握 ...
没编程基础学习JS的入门教程
JavaScript教程网为没有编程基础的人员写一个适合他们的教程,JS入门基本教程(适合没编程基础新手). 将JavaScript 插入网页的方法使用 <script>标签在网页 ...
Three 之 three.js （webgl）基础第二个入门案例之汽车模型加载和简单模型展示
Three 之 three.js (webgl)基础第二个入门案例之汽车模型加载和简单模型展示目录 Three 之 three.js (webgl)基础第二个入门案例之汽车模型加载和简单模型展 ...

WOW、ScrollReveal：WOW.js和ScrollReveal.js基础学习