如何在滚动中缩放背景图像和淡入淡出文本

<div class="container">
  <img src="background.jpg" class="background-image">
  <h1 class="text">Hello, World!</h1>
</div>

.container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.5s ease;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var containerHeight = document.querySelector('.container').offsetHeight;
  var scrollPercent = scrollTop / containerHeight;
  
  var backgroundImg = document.querySelector('.background-image');
  backgroundImg.style.transform = 'scale(' + (1 + scrollPercent) + ')';
  
  var text = document.querySelector('.text');
  text.style.opacity = scrollPercent;
});