某小健博客
当前位置: WordPress > WordPress插件 > WOW.js让你的博客动感十足

WOW.js让你的博客动感十足

2018-02-15 分类:WordPress插件 作者:某小健 阅读(80)

看到很多人的博客都有一个页面滚动加载特效,感觉很炫酷。滚动页面时会展示各式各样的动画效果,页面滚动加载特效脚本WOW.js可帮你实现这种 CSS3 动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。

WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。

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

使用方法:

1、引入文件:

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

2、HTML添加class元素:

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

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

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

3、加载激活WOW.js:

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

如果需要自定义配置,可如下使用:

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

配置说明:

boxClass WOW.js需要执行动画的元素的 class

animateClass animated’animation.css 动画的 class

offset 距离可视区域多少开始执行动画

mobile 是否在移动设备上执行动画默认:true,可选:false

live 异步加载的内容是否有效,默认:true,可选:false

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝
微信
0

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - WOW.js让你的博客动感十足

    博客简介

    服务热线:
     

     QQ在线交流

     旺旺在线