JavaScript(스크롤 위치에 따라 변하는 애니메이션)

<div class="card-background">
  <div class="card-box">
    <img src="카드이미지1경로">
  </div>
  <div class="card-box">
    <img src="카드이미지2경로">
  </div>
  <div class="card-box">
    <img src="카드이미지3경로">
  </div>
</div>

.card-background {
  height: 3000px;
  margin-top: 50px;
  margin-bottom: 1600px;
}

.card-box img {
  display: block;
  margin: auto;
  max-width: 80%;
}

.card-box {
  position: sticky;
  top: 200px;
  margin-top: 200px;
  transition : all 0.2s; // 애니메이션이 더 부드럽게 동작함
}

position: sticky를 활용하여 이미지 위치를 고정합니다.

 

$(window).scroll(function () {
  var 높이 = $(window).scrollTop();
  console.log(높이);
  var y = (-1 / 250) * 높이 + 2;
  var z = (-1 / 2500) * 높이 + 11 / 10;
  
  if (높이 >= 250) {
    $('.card-box')
      .eq(0)
      .css({ 
        opacity: y, 
        // 250부터 500까지 스크롤바를 내리면 첫째 카드의 opacity 가 1에서 0으로 서서히 변경해주셈
        transform: 'scale(' + z + ')' 
        // 250부터 500까지 스크롤바를 내리면 첫째 카드의 scale 가 1에서 0.9로 서서히 변경해주셈
      });
  }
});

직선 방정식을 활용하여 스크롤 위치에 따라 투명도와 크기가 변하는 코드를 짭니다.