스크롤 위치에 따라 변하는 애니메이션

애플페이지 UI 입니다.

스크롤을 내렸을때, 이전 화면이 불투명해지고, 크기가 작아집니다.

그리고 자세히 보면, 어느정도 스크롤을 내리면 화면이 붙어있는(sticky)한 부분도 인상적입니다.

 

 

 

위 UI를 만들기 위해 일단 HTML을 준비합니다. 

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

<div class="card-background">
  <div class="card-box">
    <img src="카드이미지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를 이용해서 스크롤시 화면에 고정되게 만들었숩니당

스크롤시 opacity가 점점 줄어드는 애니메이션도 첨가해볼게용

 

 

 

 

 

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

어느정도 스크롤을 내렸을때 opacity가 줄어드는 지 알아야 하니까요.

$(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로 설정해두고 템플릿 리터럴 `scale(${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})`);
         

        });