滚动触发css动画

<div class="parallax">
  <div class="background"></div>
  <div class="content">Scroll down to see the animation</div>
</div>

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('background.jpg');
  background-size: cover;
  transform: translateZ(-1px) scale(2);
}

.content {
  position: relative;
  z-index: 1;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  transform: translateZ(0);
  transition: transform 0.5s ease-out;
}

.content.active {
  transform: translateY(-20px);
}

window.addEventListener('scroll', function() {
  const content = document.querySelector('.content');
  if (window.scrollY > 100) {
    content.classList.add('active');
  } else {
    content.classList.remove('active');
  }
});

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll', throttle(function() {
  const content = document.querySelector('.content');
  if (window.scrollY > 100) {
    content.classList.add('active');
  } else {
    content.classList.remove('active');
  }
}, 200));

.content {
  will-change: transform;
}