滚动页面时的行星和恒星大小

<div class="planet"></div>
<div class="star"></div>

.planet {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s;
}

.star {
  width: 20px;
  height: 20px;
  background-color: yellow;
  position: fixed;
  top: 30%;
  left: 70%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s;
}

window.addEventListener('scroll', function() {
  var scrollProgress = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  var planetScale = 1 + scrollProgress * 2;
  var starScale = 1 - scrollProgress * 0.5;
  
  document.querySelector('.planet').style.transform = 'translate(-50%, -50%) scale(' + planetScale + ')';
  document.querySelector('.star').style.transform = 'translate(-50%, -50%) scale(' + starScale + ')';
});