[ 애플 웹사이트 클론 ] 특정 구간에 스크롤 애니메이션 적용하기

스크롤이 될때마다, 현재 보고있는 스크롤섹션을 지정해주었으면 이제 지정된 스크롤섹션마다의 애니메이션을 적용해주어야 한다.

 

 

 

그러기위해서는 다음과 같은 값이 필요하다.

• 해당 스크롤섹션 내에서 스크롤이 어느 정도 내려갔는 지
• 애니메이션에 필요한 스타일 시작지점과 끝지점

 

 

다음과 같이 변수명을 설정해준 뒤, 시작값, 마지막값, 시작지점과 끝지점을 할당해준다.

messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }]

 

 

 

위의 변수명을 통하여 다음과 같이 해석할 수 있다.

 

• translateY로 20%에서 0%로 움직이게되고, 해당 스크롤섹션에서 15%에서 시작해 20%에서 끝이난다.

 

스크롤 애니메이션 적용

 

 

 

calcValues라는 함수를 만들어, 특정 css값을 주는 계산을 실행해준다.

function calcValues(values, currentYOffset) {
    let rv;
    //현재 씬의 스크롤된 비율
    const scrollHeight = sceneInfo[currentScene].scrollHeight;
    const scrollRatio = currentYOffset / scrollHeight;

    if (values.length === 3) {
      //start ~ end 사이에 애니메이션 실행
      const partScrollStart = values[2].start * scrollHeight;
      const partScrollEnd = values[2].end * scrollHeight;
      const partScrollHeight = partScrollEnd - partScrollStart;

      if (
        currentYOffset >= partScrollStart &&
        currentYOffset <= partScrollEnd
      ) {
        rv =
          ((currentYOffset - partScrollStart) / partScrollHeight) *
            (values[1] - values[0]) +
          values[0];
      } else if (currentYOffset < partScrollStart) {
        rv = values[0];
      } else if (currentYOffset > partScrollEnd) {
        rv = values[1];
      }
    } else {
      rv = scrollRatio * (values[1] - values[0]) + values[0];
    }

    return rv;
  }

여기서 추가된 부분은 처음 특정 스크롤구간의 비율을 구하고자 할 때, 시작지점이전과 그 후에는 scrollRatio가 0 또는 1로 유지되기 때문에 시작지점 이전과 그 후 구간의 값을 처리해주는 조건문을 추가해주었다.

 

 

 

 

조건문은 아래와 같다. 위의 그림을 이해했다면, 아래 코드를 이해할 수 있다.

else if (currentYOffset < partScrollStart) {
        rv = values[0];
      } else if (currentYOffset > partScrollEnd) {
        rv = values[1];
      }

 

 

 

 

 

 

위에서 만든 calcValues함수를 통해서, 각 스크롤 구간때의 style값을 할당해주면 된다. 이 함수를 통해서, 스크롤이 실행될 때마다 동적으로 스타일값이 할당되게 된다.

if (scrollRatio <= 0.22) {
          // in
          objs.messageA.style.opacity = calcValues(
            values.messageA_opacity_in,
            currentYOffset
          );
          objs.messageA.style.transform = `translate3d(0, ${calcValues(
            values.messageA_translateY_in,
            currentYOffset
          )}%, 0)`;
        }

 

 

 

 

스크롤이 실행될때마다 위의 함수가 실행되면 우리가 원하는 애니메이션을 스크롤된 비율에 따라 실행시킬 수 있다.

(이것을 애니메이션이라고 해야되나..?)

 

 

 

 

 

 

---

특정구간 스크롤 애니메이션 적용

 

 

 

각 태그들에게 줄 효과와 시작지점 등을 배열로 관리하는 새로운 방법을 배운 것 같다.

또한 css의 애니메이션이 아닌, 이렇게 직접 스크롤비율에 따른 애니메이션을 구현해보면서 JS에 대한 이해도가 훨씬 깊어진 것 같다.