[javascript] 27.스크롤 위치에 따라 변하는 애니메이션

Apple Music UI 만들기

sticky로 카드 고정 후 스크롤 위치에 따른 효과 주기

우선 html을 만든다

<div
      class="progress-bar"
      style="width: 100%; height: 3px; background: gray; display: none"
    ></div>
    <div class="card-background">
      <div class="card-box">
        <img src="card1.png" />
      </div>
      <div class="card-box">
        <img src="card2.png" />
      </div>
      <div class="card-box">
        <img src="card3.png" />
      </div>

    </div>

그리고 기본 css를 입힌다

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

.card-box img {
  display: block;
  margin: auto;
  max-width: 80%;
}
.card-box {
  position: sticky;
  top: 400px;
  margin-top: 200px;
}

범위 재정의하는 방법

이 공식을 이용하여 현재 스크롤의 범위와 적용하고 싶은 opacity 혹은 scale의 범위를 지정할 수 있었다

완성된 코드

<script>
      $(window).scroll(function () {
        let scrollTop = $(window).scrollTop();
        console.log(scrollTop);
        let startscroll1 = 700;
        let endscroll1 = 1100;
        let startscroll2 = 1100;
        let endscroll2 = 1700;
        let height1 = (scrollTop - startscroll1) / (endscroll1 - startscroll1);
        let height2 = (scrollTop - startscroll2) / (endscroll2 - startscroll2);
	
		// opacity를 위한 jquery
    	$(".card-box")
          .eq(0)
          .css("opacity", 1 - height1);

        $(".card-box")
          .eq(1)
          .css("opacity", 1 - height2);

        let startscroll3 = 700;
        let endscroll3 = 900;
        let startscroll4 = 1000;
        let endscroll4 = 1600;

        let rescale1 =
          1 + ((scrollTop - startscroll3) * -0.1) / (endscroll3 - startscroll3);
        let rescale2 =
          1 + ((scrollTop - startscroll4) * -0.1) / (endscroll4 - startscroll4);
        // scale 조절을 위한 jquery
        if (scrollTop >= 750) {
          $(".card-box").eq(0).css("transform", `scale( ${rescale1} )`);
        }

        $(".card-box").eq(1).css("transform", `scale( ${rescale2} )`);
      });
      
      // 상단의 진행 바
      $(window).on("scroll", function () {
        $(".progress-bar").css("display", "block");
        let scrollTop = $(window).scrollTop();
        let windowHeight = $(window).height(); // 내가 보이는 화면의 높이
        let documentHeight = $(document).height(); // 전체 페이지의 높이
        //console.log(scrollTop / (documentHeight - windowHeight));
        // 스크롤 위치에 따라 진행바의 너비를 계산
        let scrollPercentage =
          (scrollTop / (documentHeight - windowHeight)) * 100;
        // 진행바의 너비 설정
        $(".progress-bar").css("width", scrollPercentage + "%");
      });
    </script>

반응형으로 적용이 안되지만 구현 방법을 알았으니 반응형으로도 적용해볼 수 있을 듯 하다

⬇️ 완성된 UI