【代码片段】当网页元素可见时……

吐槽/反馈/建议:咸鱼哪有心

当元素滚动到可视区域时执行指定操作,比如应用Animate.css动画效果

// 原生JS选择器
function query(selector) {
  return Array.from(document.querySelectorAll(selector));
}
// 使用构造函数创建对象并指定回调函数
let observer = new IntersectionObserver(function (changes) {
  // 回调参数是数组,成员为IntersectionObserverEntry对象
  changes.forEach(function (change) {
    let container = change.target;
    // console.log(change.intersectionRatio);
    // 大于0时表示可见
    if (change.intersectionRatio > 0) {
      // console.log(container);
      container.classList.add("flip", "animated");
    } else {
      container.classList.remove("flip", "animated");
    }
  });
});
// observe方法用于对指定一个元素开启监听
query(".section-top img").forEach(function (item) {
  // console.log(item);
  observer.observe(item);
});

-———–

IntersectionObserver API 使用教程 - 阮一峰的网络日志

http://www.ruanyifeng.com/blog/2016/11/intersectionobserver\_api.html

Animate.css

https://daneden.github.io/animate.css/

本文标题:《【代码片段】当网页元素可见时……》作者:沉冰浮水
原文链接:https://www.wdssmq.com/post/20190701815.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

搜索

控制面板

您好,欢迎到访网站!
  查看权限

最新留言

友情链接

召唤伊斯特瓦尔