网页滚动特效之WOW.JS的使用方法

MTnetwork 网站建设1 12,711155阅读模式

网页滚动特效之WOW.JS的使用方法-图片1

简介

小明今天收集了一款炫酷的网页滚动特效:滚动页面时会展示各式各样的动画效果。
有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。

WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求,还可以通过设置调整可以改变动画的风格、延迟、偏移量等。

浏览器兼容

网页滚动特效之WOW.JS的使用方法-图片2网页滚动特效之WOW.JS的使用方法-图片3网页滚动特效之WOW.JS的使用方法-图片4网页滚动特效之WOW.JS的使用方法-图片5网页滚动特效之WOW.JS的使用方法-图片6
IE10+ ✔Chrome ✔Firefox ✔Opera ✔Safari ✔

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

使用方法:

1、引用动画样式文件Animate.css 

  1. <link rel="stylesheet" href="css/animate.css">

2、加载激活WOW.js

  1. <script src="js/wow.min.js"></script>
  2. <script>
  3. new WOW().init();
  4. </script>

可选择参数:

  1. wow = new WOW({
  2.     boxClass:     'wow',      // default
  3.     animateClass: 'animated', // default
  4.     offset:       0,          // default
  5.     mobile:       true,       // default
  6.     live:         true        // default
  7. })
  8. wow.init();

配置

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

3、为HTML添加专有class

  1. <div class="wow slideInLeft"></div>
  2. <div class="wow slideInRight"></div>

其中:

slideInLeftslideInRight分别代表方式,可以改为fadeInUp和fadeInDown等实现不同的动画效果。

还可以这样写:

  1. <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
  2. <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

通过添加参数调整动画效果。

data-wow-duration 改变动画时间

data-wow-delay 延迟在动画开始之前

data-wow-offset 距离开始动画(有关浏览器底部)

data-wow-iteration 动画重复的次数

文章末尾固定信息

我的微信
这是我的微信扫一扫
weinxin
我的微信
我的微信公众号
我的微信公众号扫一扫
weinxin
我的公众号
 
MTnetwork
  • 本文由 MTnetwork 发表于 2017年4月9日 21:54:51
  • 转载请务必保留本文链接:https://www.mtwl.net/wow-js.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定