js滚动显示动画

<div class="scroll-animate" id="animateElement">滚动到这里我就会出现！</div>

.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.scroll-animate.active {
  opacity: 1;
  transform: translateY(0);
}

window.addEventListener('scroll', function() {
  var element = document.getElementById('animateElement');
  var elementTop = element.getBoundingClientRect().top;
  
  if (elementTop < window.innerHeight - 50) { // 当元素距离视口顶部小于50px时触发动画
    element.classList.add('active');
  }
});

function throttle(func, wait) {
  let timeout = null;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(this, arguments);
        timeout = null;
      }, wait);
    }
  };
}

window.addEventListener('scroll', throttle(function() {
  // ...之前的滚动处理逻辑...
}, 100)); // 每100毫秒最多执行一次