css3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果。最重要的是它:简单易用、轻量级、无需 jquery......他就是wow.js
地址:https://daneden.github.io/animate.css/ 也可以在这个地方看各种演示,下面就让我们来学习如何使用这款插件。
1、wow.js依赖于animate.css,首先需要在 head内引入animate.css或者animate.min.css。
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
2、引入wow.js或者wow.min.js,然后js文件里再写一行代码。
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
3、然后在块状元素内添加相应的class类名就能实现相应的动画啦
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
<script>
wow = new WOW(
{
boxClass: 'wow', // 默认属性名
animateClass: 'animated', // 默认触发的动画类(包含在animate css中)
offset: 0, // 为所有添加wow的元素设置 data-wow-delay属性 的默认值
mobile: true, // 是否在移动设备中开启动画
live: true // 持续监测页面中是否插入新的wow元素
}
);
wow.init();
</script>
wow rollIn | 从左到右、顺时针滚动、透明度从100%变化至设定值 |
wow bounceIn | 从原位置出现,由小变大超出设定值,再变小小于设定值,再回归设定值、透明度从100%变化至设定值 |
wow bounceInUp | 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 |
wow bounceInDown | 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 |
wow bounceInLeft | 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 |
wow bounceInRight | 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 |
wow slideInUp | 从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上)(如果元素在最下面,会撑开盒子高度) |
wow slideInDown | 从上往下、上来后固定到设定位置、透明度为设定值不变 |
wow slideInLeft | 从左往右、上来后固定到设定位置、透明度为设定值不变(left却是从左往右) |
wow slideInRight | 从右往左、上来后固定到设定位置、透明度为设定值不变 |
wow lightSpeedIn | 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度从100%变化至设定值 |
wow pulse | 原位置放大一点点在缩小至原本大小、透明度为设定值不变(配合动画执行次数属性效果更佳) |
wow flipInX | 原位置后仰前栽、透明度从100%变化至设定值 |
wow flipInY | 原位置左右旋动、透明度从100%变化至设定值 |
wow bounce | 上下抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖) |
wow shake | 左右抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖) |
wow swing | 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度为设定值不变 |
wow bounceInU | 原位置不变、直接从不显示到显示(无过过渡效果) |
wow wobble | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>WOW.js演示</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
<style>
* { margin: 0; padding: 0;}
body { overflow-x: hidden; font-family: "Microsoft Yahei";}
body h1 { width: 100%; margin: 80px 0; font-size: 50px; font-weight: 500; text-align: center;}
body .txt { margin: 80px 0; font-size: 16px; text-align: center;}
.dowebok { margin: 0 auto;}
.dowebok ul { list-style-type: none;}
.dowebok .row { font-size: 0; text-align: center;}
.dowebok .wow { display: inline-block; width: 280px; height: 280px; margin: 30px 15px 0; border-radius: 50%; font: 30px/280px "Microsoft Yahei"; vertical-align: top; *display: inline; zoom: 1;}
.bg-green { background: #5bd5a0;}
.bg-blue { background: #1daee9;}
.bg-purple { background: #c843a5;}
.bg-red { background: #eb3980;}
.bg-yellow { background: #ffcc35;}
.vad { margin: 50px 0 5px; padding-bottom: 60px; font-family: Consolas,arial,宋体; text-align:center; display:none}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
</style>
</head>
<body>
<h1>WOW.js - 让页面滚动更有趣</h1>
<p class="txt">WOW.js 能让页面滚动时显示动画,使页面更有趣。</p>
<div class="dowebok">
<div class="row">
<div class="wow rollIn bg-blue"></div>
<div class="wow bounceInDown bg-green">WOW.js</div>
<div class="wow lightSpeedIn bg-purple"></div>
</div>
<div class="row">
<div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用</div>
<div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
<div class="wow bounceInRight bg-blue">轻量级</div>
</div>
<div class="row">
<div class="wow bounceInLeft bg-green"></div>
<div class="wow flipInX bg-purple">WOW.js</div>
<div class="wow bounceInRight bg-yellow"></div>
</div>
<div class="row">
<div class="wow rollIn bg-blue">无需 jQuery</div>
<div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
<div class="wow swing bg-purple" data-wow-iteration="2">纯 JS</div>
</div>
<div class="row">
<div class="wow rollIn bg-red"></div>
<div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div>
<div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div>
</div>
<div class="row">
<div class="wow bounceInLeft bg-purple">依赖 animate.css</div>
<div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div>
<div class="wow lightSpeedIn bg-yellow">多种动画</div>
</div>
<div class="row">
<div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div>
<div class="wow bounceInUp bg-red">WOW.js</div>
<div class="wow bounceInRight bg-purple"></div>
</div>
<div class="row">
<div class="wow rollIn bg-red" data-wow-delay="0.5s">无需 jQuery!?</div>
<div class="wow bounceInDown bg-green" data-wow-delay="1s"></div>
<div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">谢谢</div>
</div>
</div>
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
<script>
<script>
wow = new WOW(
{
boxClass: 'wow', // 默认属性名
animateClass: 'animated', // 默认触发的动画类(包含在animate css中)
offset: 0, // 为所有添加wow的元素设置 data-wow-delay属性 的默认值
mobile: true, // 是否在移动设备中开启动画
live: true // 持续监测页面中是否插入新的wow元素
}
);
wow.init();
</script>
</script>
</body>
</html>
是不是很简单,页面初始化后随着滚动条加载模块,看起来和懒加载效果一样,高大上的感觉有木有?
温馨提示:IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。
来自:https://www.cnblogs.com/webdom/archive/2019/04/11/10690364.html
WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件,在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
页面在向下滚动的时候,你想让页面元素产生细小的动画效果,从而引起浏览者注意力,那么你可以试试 WOW.js。WOW.js支持多种动画效果,让你的页面滚动效果更加有趣。WOW.js 依赖animate.css
页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意,刚知道wow.js这个插件,之前写的类似滚动时页面效果都是自己用jQuery写的,现在有了插件,开发更加快捷有效了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!