javascript - 元素淡入滚动 PURE vanilla javascript

Question

我希望在您滚动到元素时淡入淡出。问题是我需要纯 vanilla javascript 中的它……绝对没有 jquery。我在网上找到的所有东西都在 jquery 中，这是一场斗争。我正在为我的动画使用 tweenMax。在此先感谢您的帮助。

    if(window.scrollY > 550){
    TweenMax.staggerFromTo(newProduct, 1, {opacity:0}, {opacity:1}, 0.5);
}

Answer 1

这里我使用了 CSS 淡入/淡出。

在滚动时，我检查元素是否为视口(viewport)，如果是，我添加类 inview，否则我删除它。如果你想让它只淡入，你可以改变选择器以排除 inview 类。

let section = document.createElement('section');
document.body.appendChild(section);
for (let x = 1; x <= 100; x ++) {
  let d = document.createElement('div');
  d.innerText = `Hello there div line ${x} of 100`;
  section.appendChild(d);
}
  
function inView (el) {
  var sb = section.getBoundingClientRect();
  var eb = el.getBoundingClientRect();
  return !((eb.top + eb.height < 0) || (eb.top > sb.height));
}

function updateInView() {
  for (x of document.querySelectorAll('div')) {
    if (inView(x)) x.classList.add('inview')
    else x.classList.remove('inview');
  }
}

section.onscroll = updateInView;

updateInView();

div {
  opacity: 0.0;
  transition: opacity 1s;
}

div.inview {
  opacity: 1;
}

section {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: black;
  color: yellow;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}