[TIL] 자바스크립트로 애플갬성 스크롤 애니메이션 만들기 (너무 뿌듯해서 남기는 글)

 

 

코딩애플 자바스크립트 강의 막바지 듣는 중,
애플 갬성으로 스크롤 애니메이션 만드는 강의가 있었다.

 

 

쌤이 주신 예제 자료는 이것
(지금은 사이트 레이아웃이 바뀌어서.. 강의 자료를 가져왔..)

 

 

 

👀  opacity 가변값 구하기

현재 창의 scrollTop 값을 콘솔에 찍어보고,
애니메이션의 시작점과 끝점의 스크롤값을 찾는다.

 

그러면 이런 그래프를 그릴 수 있었다.
저 그래프의 기울기값을 구하면 opacity의 가변값을 구할 수 있다며 중학생때 배웠다는 함수를 알려주셨는데
머리가 하얗게 되었다 ㅎㅎ
수학은 잊고 살아도 너무 잊고 살았다..

 

이런것도 못알아 듣겠는 나를 자책하면서 혹시 다른 코드로 해결할 수는 없나 구글링 해봤는데, 라이브러리만 잔뜩..

 

그래서 주변인을 괴롭혀 중등 수학강의를 들었고
가까스로 y = ax + b 를 이해했다.

여기서부터 진짜 고민이 시작되었다.

 

 

 

 

👀  어느 세월에 하나하나 계산해?

스크롤값이 다른 카드 2개에 각각의 기울기값이 필요했고,
적용해야할 css속성도 두 개 였다. (opacity, scale)

4개의 그래프를 그리고 계산식대로 하나하나 계산하면 되긴 했는데,
뭔가 더 좋은 방법이 있을 것 같았다.
그래서 계산기 함수를 만들어보기로 했다.

 

 

 

 

👀  a 와 b 값부터 찾자

높이1일때 가변값1이고 높이2일때 가변값2인 기울기니까
height1 height2 variable1 variable2 를 파라미터로 넣어서 a를 구한다음, b까지 구했다.

 

function slope(height1, height2, variable1, variable2) {
  let a = (variable1 - variable2) / (height1 - height2);
  let b = -(height1 * a) + variable1;

  let height = $(window).scrollTop();

  variable = a * height + b
  return variable;
}

그리고 스크롤값을 변수로 가져온다음, 내가 진짜 필요한 가변값(variable)을 리턴시켰다.

 

 

 

 

👀  각 이미지에 함수를 넣었다

cardBox.eq(0).css('opacity', slope(3600, 4090, 1, 0));
cardBox.eq(0).css('transform', `scale(${slope(3600, 4090, 1, .9)})`);
cardBox.eq(1).css('opacity', slope(4140, 4590, 1, 0));
cardBox.eq(1).css('transform', `scale(${slope(4140, 4590, 1, .9)})`);

일단 계산기가 작동해서 너무 신기하고 기뻐서 소리를 질렀다 ㅋㅋ
근데 scale에 문제가 있었다.

 

 

스크롤값이 낮아지면 스케일값이 1보다 많아지면서 크기가 의도한 width값을 넘겨버렸다.
(opacity는 1을 넘겨도 노상관이라 티가 안남..)

 

 

 

 

 

👀 이래도 되나 싶은데 일단 if문으로 잡았다.

$(window).scroll(function(){

  function slope(height1, height2, variable1, variable2) {
    let a = (variable1 - variable2) / (height1 - height2);
    let b = -(height1 * a) + variable1;

    let height = $(window).scrollTop();

    variable = a * height + b
    return variable;
  };

  cardBox.eq(0).css('opacity', slope(3600, 4090, 1, 0));

  if (slope(3600, 4090, 1, .9) <= 1) {
    cardBox.eq(0).css('transform', `scale(${slope(3600, 4090, 1, .9)})`);
  } else {
    cardBox.eq(0).css('transform', 'scale(1)')
  };

  cardBox.eq(1).css('opacity', slope(4140, 4590, 1, 0));

  if (slope(4140, 4590, 1, .9) <= 1) {
    cardBox.eq(1).css('transform', `scale(${slope(4140, 4590, 1, .9)})`);
  } else {
    cardBox.eq(1).css('transform', 'scale(1)')
  };
});

slope 함수의 값이 1을 넘어가면 스케일을 1로 고정하는 것으로..

 

 

그래서 요렇게 애니메이션 완성!

 

 

---

 

 

어제까진 1차함수도 못해서 쩔쩔매다가 function으로 계산할 수 있게 만들었다는게 나혼자 너무 뿌듯해서
주절주절 기록으로 남겨보았다 🤨

하지만 이대로는 코드가 너무 길고 if문 말고 왠지 또 다른 방법이 있지 않을까 하는 생각이..
계속 공부하다가 또 다른 방법이 생기면 개선 해봐야겠다.