实现网页滚动时的动画,wow.js,wow.js兼容不运行问题

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

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

前期准备

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

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

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

使用说明

1、引入文件

2、HTML 填写所需 class 名

属性：

data-wow-duration（动画持续时间）

data-wow-delay（动画延迟时间）

例子：

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

实际上是换了 viewTop

补充 1：

 将    false    改为   true 文章来源地址 https://www.toymoban.com/diary/web/183.html

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

到此这篇关于实现网页滚动时的动画,wow.js,wow.js 兼容不运行问题的文章就介绍到这了, 更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持 TOY 模板网！

原文地址:https://www.toymoban.com/diary/web/183.html

如若转载，请注明出处：如若内容造成侵权 / 违法违规 / 事实不符，请联系站长进行投诉反馈，一经查实，立即删除！