JS - 스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 만들기

참고 사이트 : apple.com/apple-music

스크롤 바 일정부분을 내리면 카드가 더이상 올라가지 않고 정지하는 애니메이션입니다

우선 깨끗한 HTML 파일에 jQuery와 CSS파일을 첨부 한 후
이미지 3개를 배치한다

    <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>

.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;
}

긴 배경에 카드 3개를 배치하고
position : sticky를 이용해서 스크롤 시 화면이 고정되게 만들었다!
여기까지는 OK 지만,,,
우리가 만들건 opacity가 점점 줄어드는 애니메이션을 만들어야한다

스크롤 위치에 따라 opacity가 변하는 애니메이션 만들기

스크롤을 내릴때 카드의 변화는
1. opacity가 변하고
2. 사이즈가 줄어든다

지금까지 배운 애니메이션은 one-way 애니메이션이었다
시작화면과 최종화면만 있었을 뿐이지만 지금은 스크롤 위치에 따라 opacity가 0에서 1까지 무수히 많은 중간단계가 존재!
그렇다면 어떻게 만들어야할까??

$(window).scroll(function(){
    var 높이 = $(window).scrollTop();
    console.log(높이);
});

스크롤 바의 높이에 따라 opacity가 변하므로 스크롤 바의 시작점과 도착점을 알아야하므로 scrollTop을 구해줘야한다

$(window).scroll(function(){

  var 높이 = $(window).scrollTop();
  console.log(높이);
        
// 650~1150까지 스크롤바를 내리면,
// 첫째카드의 opacity 1~0으로 서서히 변경해주세요
  $('.card-box').eq(0).css('opacity', ???);

});

"???" 부분을 그냥 0 이라 하면 서서히 변하는 것이 아니기 때문에 여기에는
"스크롤바 높이가 650~1150이 될 때 1~0이 되는 가변적인 값"
이 되어야한다

따라서 이 미지의 변수를 y라 두고 구해보자

가변적인 값을 이런 그래프로 나타낼 수 있고 이걸 수식으로 표현하면
y = a * 높이 + b
로 나타낼 수 있다
y에 대한 1차함수는 우리가 기울기를 모를때 일단 ax+b이렇게 표현할 수 있다는것을 활용하면 된다

a는 기울기, b는 y절편...! (와우 까먹었었는데 갑자기 번뜩 생각이 났당...)

a, b를 구하는 방법은 대입법을 사용해야한다
높이가 650일 때 y가 1,
높이가 1150일 때 y가 0 이다

//수학시간
1 = a * 650 + b
0 = a * 1150 + b

이 방정식을 풀어보면

a = -1/500
b = 115/50

이런 값이 나온다

그럼 이걸 아까 y를 표현하는 수식에 대입해본다면? ?

var y = -1/500 * 높이 + 115/50

이렇게 된다

완성
<script>
$(window).scroll(function(){

  var 높이 = $(window).scrollTop();
  console.log(높이);

  var y =  -1/500 * 높이 + 115/50;
  $('.card-box').eq(0).css('opacity', y);

});
</script>

---

오늘의 숙제 : 투명도 뿐만 아니라 카드가 0.9배정도 서서히 작아지는 것도 구현해보기 (transform속성 사용)

사이즈를 줄이는건 transform : scale(0.9) 를 사용하면 되지만
오늘 배운 미지의 변수를 사용하기!!

z = a * 높이 + b 이렇게 수식을 세운 후
높이가 650일때는 z가 1
높이가 1150일때는 z가 0.9

대입법으로 a와 b라는 상수를 구하면
a는 -1/500 이고 b는 115/50 이다

opacity가 줄어드는 코드에 이어서 쓴다면 이렇게 된다

<script>
$(window).scroll(function(){

  var 높이 = $(window).scrollTop();
  console.log(높이);

  var y =  -1/500 * 높이 + 115/50;
  $('.card-box').eq(0).css('opacity', y);

  var z = (-1/5000) * 높이 + 565/500;
  $('.card-box').eq(0).css('transform', `scale( ${z} )`);

});
</script>

${} 기호는 HTML 생성할 때 배운 글자 중간에 변수 삽입하는 스킬!