(Ganzl) 스크롤 위치에 따라 달라지는 애니메이션

이것은 Apple 측 UI입니다.

아래로 스크롤하면 이전 화면이 불투명해지고 축소됩니다.

그리고 자세히 보면 어느 정도 아래로 스크롤하면 화면의 끈적이는 부분도 인상적이다.

위의 UI를 생성하려면 먼저 HTML 코드를 준비합니다.

깨끗한 HTML 파일에 jQuery와 CSS 파일을 첨부한 후 다음과 같이 3개의 이미지를 배치합니다.

<div class="card-background">
  <div class="card-box">
    <img src="http://kindjjee.m/카드이미지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: 800px;
  margin-bottom: 1600px;
}

.card-box img {
  display: block;
  margin: auto;
  max-width: 80%;
}
.card-box {
  position: sticky;
  top: 400px;  => 200px 정도로 해도 될듯, 얼마나 위에 sticky 할지 정하는 요소
  margin-top: 200px;
}

position: 스크롤하는 동안 화면에 고정하기 위해 sticky를 사용했습니다.

스크롤에 불투명도가 떨어지는 애니메이션나는 추가하려고 노력할 것이다

그렇다면 현재 창의 높이를 알아야겠죠?

아래로 스크롤할 때 불투명도가 낮아지는지 알아야 합니다.

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

$(window).scroll(function(){

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

});

??? 에서 고정된 값이 아닙니다. “스크롤바 높이가 650~1150일 때 1~0이 되는 변수 값”그래야 합니까?

알 수 없는 변수가 y라고 가정하고 다음 식을 작성합니다.

y = ax + b를 대입할 때 이 공식을 사용해야 하므로 점 (650,0)과 (1150,1)을 경유하는 a와 b를 찾을 수 있겠죠?

다음으로 맵 크기 감소를 1에서 0.9로 해결합니다.

나는 ‘transform’과 ‘scale’을 사용하지만 scale의 값은 가변적입니다.

변수 z를 템플릿 리터럴로 설정 `스케일(${z})` 처리를 담당합니다.

 $(window).scroll(function(){ //화면이 스크롤 될때마다 내부코드를 실행해주세요~
        var 높이 = $(window).scrollTop();
        console.log(높이);

        //650~1150까지 스크롤바를 내리면,첫째카드의 opacity 1~0으로 서서히 바뀜
        // y = ax + b(일차함수 형태), 대입법으로 a와 b를 구함
        var y = (-1/500) * 높이 +115/50; 
        $('.card-box').eq(0).css('opacity',y);

        //650~1150까지 스크롤바를 내리면, 카드의 크기가 1에서 0.9로 작아짐
        //y = ax +b 일차함수에서 (650,1)과 (1150,0.9)를 동시에 지나는 식을쓰자

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

        });