UI: Scroll animation

---

JQuery를 사용해서 구현

🥱 Sticky를 사용한 고정

position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position : static 과 같이 일반적인 상태지만 스크롤의 위치가 임계값에 이르면 position : fixed와 같이 박스를 지정한 top, bottom, left,right 값에 맞게 고정된다.

 

fixed 는 뷰포트를 기준으로 박스를 고정하지만 sticky는  자신을 감싸고 있는 부모의 scroll박스 를 기준으로 고정한다.

 

 

[HTML]

<div class="card-background">
      <h1>
        It's as easy<br />
        as it sounds.<br />
      </h1>
      <div class="card-box"><img src="./card1.png" alt="card1" /></div>
      <div class="card-box"><img src="./card2.png" alt="card2" /></div>
      <div class="card-box"><img src="./card3.png" alt="card3" /></div>
    </div>

[CSS]

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.card-background h1 {
  position: sticky;
  top: 200px;
  display: block;
  margin: auto;
  max-width: 80%;
  text-align: center;
  font-size: 60px;
}

.card-box {
  position: sticky;
  top: 400px;
  margin-top: 200px;
  max-width: 100vw;
  transition: all 0.2s;
}

.card-box img {
  display: block;
  margin: auto;
  max-width: 80%;
}

 

---

 

 

🤔 Scroll animation 구현방법

 

다음은 사용자의 Scroll 값에 따라 동작하는 animation 효과 이다. 

Scroll UI, animation 의 핵심은 사용자의 현재 scroll 값에 따른 요소의 상태를 지정해주는 것이다.

 

적용해야할 인터렉션

1. Scroll 값에 따른 투명도 "opacity"

2. Scroll 값에 따른 요소크기 "Scale" 

 

css의 transition, animation 속성 으로는 정확한 지점에서 적용할 효과의 값만을 적용하고 멈추게 하기 어렵다.

transition, animation 속성 둘다 적용 범위안에 들어가면 자동으로 효과가 계속 진행 되어버리기 때문이다.

 

예를들어 trainsition: opacity 10s ease-in 과 같은 값을 주고 난뒤 조건문으로 scroll의 범위를 지정하고 addclass로 각 스크롤의 범위마다 클래스를 붙힌다고 해도 엄청나게 많은 양의 조건문과 , 클래스들이 생성될 것이다 ......

 

따라서 다른 방법을 생각해야 하는데 이는 중학교 수학시간에 배웠던 일차함수 그래프를 떠올리면 쉽게 해결할 수 있다!

 

😒 [일차함수]

opacity, scale 같은 속성을 적용하려면 각 속성이 scroll 의 정확한 수치에 따라 어느정도의 값으로 적용 되는지 지정하는 코드를 짜야한다. 이때 일차함수 y=ax + b 의 식에서 

 

1. y = 인터렉션의 값 

2. x = 사용자 스크롤 값

 

이때 각 속성을 적용할 최소~최대 Scroll 의 범위는 console.log 를 통해 정확히 구할수 있다. 

예를들어 800~1400 의 scroll 범위에 효과를 적용하고, y에 opacity 값이 1~0으로 변한다 할때

 

1. 1 = 800a + b

2. 0 = 1400 + b

 

위와 같은 두 식을 도출할수 있고 이 두 식을 대입법을 통해 계산 하면 a,b의 값을 찾아낼 수 있다.

 

1. a = -600/1

2. b = 7/3

 

 

결론적으로  var y = (-600/1)*$(window).scrollTop() + 7/3  일때 y는 가변적으로 변하는 요소값이 된다.

 

[JavaScript]

//뷰포트가 스크롤 될때 실행
$(window).scroll(function () {
  // scroll값을 height변수에 할당
  var height = $(window).scrollTop();
  // 개발자도구에서 scroll 값을 확인 하기 위함
  console.log(height);

  //조건문으로 애니메이션 범위 지정
  if ($(window).scrollTop() >= 800 && $(window).scrollTop() < 1400) {
    // [.card-box 1번]
    // $(".card-box").eq(0)
    // 시작 : 800
    // 끝: 1400
    var y0 = (-1 / 600) * height + 7 / 3;
    $(".card-box").eq(0).css("opacity", y0);
    var c0 = (-1 / 6000) * height + 17 / 15;
    $(".card-box").eq(0).css("transform", `scale( ${c0} )`);
  } else if ($(window).scrollTop() >= 1400 && $(window).scrollTop() < 2000) {
    // [.card-box 2번]
    // $(".card-box").eq(1)
    // 시작 : 1400
    // 끝: 2000
    var y1 = (-1 / 600) * height + 10 / 3;
    $(".card-box").eq(1).css("opacity", y1);
    var c1 = (-1 / 6000) * height + 37 / 30;
    $(".card-box").eq(1).css("transform", `scale( ${c1} )`);
  }
});

// ===================================================================================
// [opacity change]
// $(".card-box").eq(0) 가 opacity가 1~0이 되는 기준
// 시작 : 800
// 끝: 1400

// 스크롤 값에 따라 변하는 값 y를 그래프로(1차 함수로 표현)
// y의 식을 수식으로 표현
//   y = a * height + b;
//   1 = a * 800 + b;
//   0 = a * 1400 + b;

// 대입법을 통해 a,b 값 도출
//   a = -1/600
//   b = 7/3
// ===================================================================================
// [transform change]
// $(".card-box").eq(0) 가 transform scale 가 1~0.9가 되는 기준
// 시작 : 800
// 끝: 1400

// 스크롤 값에 따라 변하는 값 c를 그래프로(1차 함수로 표현)
// c의 식을 수식으로 표현
//   c = a * height + b;
//   1 = a * 800 + b;
//   0.9 = a * 1400 + b;

// 대입법을 통해 a,b 값 도출
//   a = -1 / 6000
//   b = 17 / 15

// ===================================================================================

 

 

 

 

 

 

 

출처:

https://tech.lezhin.com/2019/03/20/css-sticky 

https://codingapple.com/course/javascript-jquery-ui/