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

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

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

文章来源地址https://www.yii666.com/learning/web/183.html网址:yii666.com<

前期准备

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（动画持续时间）文章地址https://www.yii666.com/learning/web/183.html

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>

文章来源地址:https://www.yii666.com/learning/web/183.html

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网址:yii666.com

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;
      }
};