UI / 애플 스크롤 UI

스크롤을 내리면, 일정위치에서 이미지가 멈추다가, 밑의 이미지와 겹치기 시작하면, 점점 투명해지고, 크기가 작아진다.

html 코드

<div class="card-background">
  <div class="card-box img1">
    <img src="img/phone-card1.png" alt="" />
  </div>
  <div class="card-box">
    <img src="img/phone-card2.png" alt="" />
  </div>
  <div class="card-box">
    <img src="img/phone-card3.png" alt="" />
  </div>
</div>

css 코드

• position: sticky; top: 400px;
  • 이미지가 올라가다가 top: 400px; 지점에서 멈춘다.

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

.card-box {
  position: sticky;
  top: 400px;
  margin-top: 200px;
  transition: all 0.2s;
}

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

js 코드

• 스크롤 이벤트 감지
• 0번째 카드 박스를 들고 와서 css()css 직접 변경하여, 투명도와 크기를 조절하였음
• 투명도 변경
  • 0번째 사진과 1번째 사진이 경계선에서 겹치는 지점의 스크롤탑 값을 구한다.
    • $(window).scrollTop()
    • 이때의 스크롤 탑에서는 투명도가 1이 되어야한다.
  • 0번째 사진과 1번째 사진이 완전히 겹치는 지점의 스크롤 탑 값을 구한다.
    • 이때의 스크롤 탑에서는 투명도가 0이 되어야한다.
  • 스크롤 탑이 650에서 1150으로 바뀔때, 투명도는 연속적으로 1에서 0으로 바뀌어야한다
    • 두개의 좌표 (650,1), (1150,0)을 아는 상태이므로 스크롤에 따른 투명도 일차함수를 구할 수 있다.
    • 일차함수 let opacity1 = (-1 / 500) * $(window).scrollTop() + 115 / 50;
  • css 직접 변경 할 때, key값에 일차함수의 y값을 대입한다.

$(window).on("scroll", function () {
  let opacity1 = (-1 / 500) * $(window).scrollTop() + 115 / 50;
  $(".card-box").eq(0).css("opacity", opacity1);

  if ($(window).scrollTop() >= 650 && $(window).scrollTop() <= 1150) {
    let scale1 = -0.0002 * $(window).scrollTop() + 1.13;
    $(".card-box").eq(0).css("transform", `scale(${scale1})`);
  }
});

문제점

• 윈도우 창의 크기에 따라, 이미지가 겹칠 때의 스크롤 탑의 값이 달라져서, 이미지가 완전히 겹쳐지지 않은 경우에도, 이미지가 사라지는 경우에 발생한다.