使用wow.js实现网页滚动时的动画效果,以及处理兼容问题,wow.js下载

 

原标题:使用wow.js实现网页滚动时的动画效果,以及处理兼容问题,wow.js下载

实现网页滚动时的动画效果


做一下前端页面滚动效果,如何快速实现滚动页面的时候会看到各式各样的元素动画效果,定制仔细喜欢的css动态效果



前期准备


1、插件 wow.js ,点击下载

2、CSS插件 animate.min.css,点击下载

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



使用说明


1、引入文件

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


2、HTML填写所需 class 名

<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

var wow = new WOW(
  {
    boxClass:     'wow',      // 动画元素 css 类(默认是 wow)
    animateClass: 'animated', // 动画 css 类(默认为 animated)
    offset:       0,          // 触发动画时到元素的距离(默认为 0)
    mobile:       true,       // 在移动设备上触发动画(默认为 true)
    live:         true,       // 作用于异步加载的内容(默认为 true)
    callback:     function(box) {
      // 每次启动动画时都会触发回调
      // 传入的参数是动画的 DOM 节点
    },
    scrollContainer: null // 可选滚动容器选择器,否则使用窗口
  }
);
wow.init();



如何解决兼容问题或者滚动后效果不生效,又或者空白问题


1、在wow.js中,源代码491-499行如下(具体行数可能有出入),主要是这个函数

WOW.prototype.isVisible = function(box) {
    var bottom, offset, top, viewBottom, viewTop;
    offset = box.getAttribute('data-wow-offset') || this.config.offset;
    viewTop = window.pageYOffset;
    viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
    top = this.offsetTop(box);
    bottom = top + box.clientHeight;
    return top <= viewBottom && bottom >= viewTop;
};

换成一下内容

WOW.prototype.isVisible = function(box) {
    var bottom, offset, top, viewBottom, viewTop;
    offset = box.getAttribute('data-wow-offset') || this.config.offset;
    viewTop = (this.config.scrollContainer && this.config.scrollContainer.scrollTop) || window.pageYOffset||document.body.scrollTop;
    viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
    top = this.offsetTop(box);
    bottom = top + box.clientHeight;
    return top <= viewBottom && bottom >= viewTop;
};

实际上是换了 viewTop


补充1:

 将    false    改为   true

Util.prototype.addEvent = function(elem, event, fn) {
      if (elem.addEventListener != null) {
        return elem.addEventListener(event, fn, false);
      } else if (elem.attachEvent != null) {
        return elem.attachEvent("on" + event, fn);
      } else {
        return elem[event] = fn;
      }
};



教你如何每天领取饿了么红包,饿了么优惠卷,饿了么会员?

教你如何每天领取美团红包,美团优惠卷,美团会员?

其他相关文章
    领支付宝红包赞助服务器费用
    微信公众号:小猪波罗蜜
    关注公众号,回复999,可联系站长解答疑问哦。每天分享更多有趣的事儿,有趣有料!
    99人已关注

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信图片_20190322181744_03.jpg

    微信扫一扫打赏

    请作者喝杯咖啡吧~

    支付宝扫一扫领取红包,优惠每天领

    二维码1

    zhifubaohongbao.png

    二维码2

    zhifubaohongbao2.png