WOW.js – 让页面滚动更有趣
2016-01-13 10:45
621 查看
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>WOW.js演示_dowebok</title> <link rel="stylesheet" href="http://cdn.dowebok.com/98/css/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;} </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-purp d11e le"></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="http://cdn.dowebok.com/131/js/wow.min.js"></script> <script> if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script> </body> </html>
有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。
WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。
浏览器兼容
IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。
使用方法
1、引入文件
<link rel="stylesheet" href="css/animate.min.css">
2、HTML
<div class="wow slideInLeft"></div> <div class="wow slideInRight"></div>
可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
3、JavaScript
new WOW().init();
如果需要自定义配置,可如下使用:
var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }); wow.init();
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
boxClass | 字符串 | ‘wow’ | 需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
相关文章推荐
- JavaScript 基础2
- scrollReveal.js – 页面滚动显示动画JS
- JS中alert中文乱码
- console.error和js异常的区别
- JS常用扩展内建对象
- 简单的JS时钟实例讲解
- angular js表达式
- Jfinal 使用 JsonKit 转换不了问题
- Javascript学习笔记03——Js基本概念
- 解析json之com.google.gson.Gson
- 一些js的用法
- Web Essentials之JavaScript,TypeScript和CoffeeScript
- 浅析JavaScript中的变量复制、参数传递和作用域链
- 匿名函数,结合闭包的写法,js对象的案例
- 匿名函数,结合闭包的写法,js对象的案例
- JSP知识点总结
- Extjs学习----------动态载入js文件(减轻浏览器的压力)
- JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
- highstock双X周scrollbar拖动bug,xAxis1不联动
- FormData收集表单信息&并且转化为Json格式进行提交验证