javascript - 元素淡入滚动PURE Vanilla javascript

当您滚动到元素时，我希望它们逐渐消失。不足之处是我需要纯香草javascript ...绝对没有jquery。我在网上找到的所有东西都在jquery中，这很挣扎。我正在为动画使用tweenMax。谢谢您的帮助。

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

最佳答案

在这里，我使用CSS淡入/淡出。

在滚动时，我检查元素是否为视口，如果是，则添加类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;
}