WOW.js插件介绍与使用



插件介绍

WOW.js可以让页面滚动更有趣。当我们页面向下滚动时,页面的元素会产生有趣的动画效果。虽然动画很细微,但是却能吸引你的眼球。相信在网上你也看到了许多类似的效果,如果你也想你的网站页面更有趣,那就试试WOW.js吧。ja2思考者日记网-束洋洋个人博客

WOW.js依赖animate.cssja2思考者日记网-束洋洋个人博客

ja2思考者日记网-束洋洋个人博客

浏览器兼容

IE Chrome Firefox Opera Safari
IE10+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了querySelectorAll方法,IE低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。ja2思考者日记网-束洋洋个人博客

ja2思考者日记网-束洋洋个人博客

效果预览

WOW.js官网 效果展示 ja2思考者日记网-束洋洋个人博客

ja2思考者日记网-束洋洋个人博客

如何使用

1、引入animate.css

<link rel="stylesheet" type="text/css" href="css/animate.min.css">

2、HTML

需要动画元素(必须设置为块状或者行内块状!必须设置为块状或者行内块状!必须设置为块状或者行内块状!)添加class类名ja2思考者日记网-束洋洋个人博客

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

类名前面的wow是每一个带动画的元素默认要加的(当然不加这个也可以,你也可以指定你的class类名,后面说到),slideInLeft就是说明动画样式。后面的data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可选可不选。ja2思考者日记网-束洋洋个人博客

3、JavaScript

在最底部引用wow.js或者wow.min.js,然后再下面再写一行javascript代码。(无需引用jQuery)ja2思考者日记网-束洋洋个人博客

<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
    new WOW().init();
</script>

如果需要自定义配置,可如下使用:ja2思考者日记网-束洋洋个人博客

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

ja2思考者日记网-束洋洋个人博客

配置

属性/方法 类型 默认值 说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效

ja2思考者日记网-束洋洋个人博客

animation.css 动画的各种 class 类名的动画效果

class类名 效果说明
rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值
bounceIn 从原位置出现,由小变大超出设定值,再变小小于设定值,再回归设定值、透明度从100%变化至设定值
bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上)(如果元素在最下面,会撑开盒子高度)
slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变
slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变(left却是从左往右)
slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变
lightSpeedIn 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度从100%变化至设定值
pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变(配合动画执行次数属性效果更佳)
flipInX 原位置后仰前栽、透明度从100%变化至设定值
flipInY 原位置左右旋动、透明度从100%变化至设定值
bounce 上下抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)
shake 左右抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)
swing 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度为设定值不变
bounceInU 原位置不变、直接从不显示到显示(无过过渡效果)
wobble 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

以上效果可以打开引用的animate.css或者animate.min.css,里面@keyframes定义了各种动画。配合data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可以完成很多效果,主要还是多实践。ja2思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  •  感谢主机屋提供网站空间;
  •  感谢万网阿里云提供域名解析;
  •  感谢EmpireCMS提供CMS系统;
  •  感谢bootstrap展示本站前端页面;
  •  感谢Glyphicons Halflings提供字体;
  •  感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈

 

网友评论
我也来说两句
点击显示

 

点击显示弹幕