我们应该感谢相遇,无论结局是喜是悲....
WOW.js – 让页面滚动更有趣
  • 首页 > IT技术
  • 作者:起点终站
  • 2016年7月13日 11:49 星期三
  • 浏览:5973
  • 字号:
  • 评论:1

  • 有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。

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

    浏览器兼容

    IE Chrome Firefox Opera Safari
    IE10+  Chrome  Firefox  Opera  Safari 

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

    使用方法

    1、引入文件

    <link rel="stylesheet" href="css/animate.min.css">
    <script type="text/javascript" src="jss/wow.min.js"></script>

    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 异步加载的内容是否有效

    演示1 




      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: WOW.js – 让页面滚动更有趣
    本文地址:https://blog.hellozwh.com/?post=72
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    起点终站 没错,我就是那个帅逼站长2016-07-15 13:46
    有点卡。。被我咔嚓掉了
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2014-2017 起点终站   闽ICP备16011094号-1

    00:00 / 00:00
    顺序播放