스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x)

스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x)

 

조금 있어보이는 웹페이지를 구성 할 때 빠질 수 없는 것이 바로 모션(애니메이션)입니다.

모션에는 여러 종류가 있지만 오늘은 스크롤을 내릴 때 요소가 화면에 등장하는 모션을 한번 만들어 보겠습니다.

 

스크롤 관련된 모션이나 기능을 넣을 때는 보통 'ScrollMagic'이라는 라이브러리를 많이 사용하는데 오늘은 그런거 없이 순수 자바스크립트 기능만으로 모션을 구현해 보려고 합니다.

 

스크롤 모션 구현에 필요한 Web API는 크게 addEventListener와 scrollY, offsetTop 세가지로 각각 무슨 역할인지 알아보고 최종 예제 코드를 살펴봅시다.

 

 

addEventListener()

addEventListener는 특정한 이벤트가 일어나면 인자로 주어진 콜백에게 알림을 주어 실행 시킬 때 사용하는 Web API입니다. (자세한내용은 링크를 참고하세요)

우리는 전체 창인 window에 addEventListener를 붙여서 scroll 이벤트를 감지할 겁니다. 코드 예제를 봅시다.

window.addEventListener("scroll", motion1);

function motion1(){
  console.log("Hello");
}

위의 코드를 실행시키면 창이 스크롤 될 때마다 motion1함수가 실행되고, motion1 함수는 콘솔창에 "Hello"를 출력합니다.

여기서 스크롤 바의 Y축 위치를 알 수만 있다면 특정한 스크롤 위치에서 무언가를 실행시킬 수 있을 것 같은데요.

그럼 스크롤 바의 Y축 위치는 어떻게 구할 수 있을까요?

 

 

scrollY

window.scrollY를 이용하면 스크롤 바의 (상단 기준) Y축 위치를 알 수 있습니다.

 

 

이제 우리는 스크롤바가 어느 위치에 위치해있는지 알 수 있게 됐습니다.

하지만 등장 모션을 구현하기 위해서는 한가지를 더 알아야 하는데, 바로 모션이 시작되야 할 기준이 될 요소의 위치입니다.

 

 

offsetTop

HTMLElement.offsetTop는 해당 요소의 부모를 기준으로 위쪽으로 떨어진 만큼의 픽셀값을 반환합니다.

이것을 잘 이용하면 모션이 시작되야 할 높이의 기준이 될 요소의 절대 높이(위치)를 구할 수 있습니다.

 

( *주의점 : offestTop은 부모요소가 기준이기 때문에 offsetTop으로 위치를 구할 요소의 부모는 'body'가 되야합니다. 만약 부모가 'body'가 아니라면 부모 요소의 offsetTop을 해당 요소의 offsetTop에 더해주면 됩니다.)

 

 

짠~ 결과창을 보면 해당 요소의 위쪽면이 화면의 위쪽에 닿았을 때 모션이 동작하는 것을 볼 수 있습니다.

근데 보다보면 이 경우 요소의 위쪽이 화면의 위쪽에 닿아야해서 맘에 안듭니다. 요소가 거의 등장할 때 쯤에 모션이 동작하도록 바꿔봅시다.

 

 

innerHeight

window.innerHeight는 창 화면의 높이값을 반환합니다. 해당 api를 사용하면, 화면의 어디쯤에서 모션이 적용될지 조정 할 수 있습니다.

window.innerHeight를 이용해서 모션이 들어갈 요소가 화면의 1/5에 왔을 때 모션을 적용해봅시다.

 

 

 

 

 

마무리

오늘은 순수 자바스크립트 만으로 스크롤 등장 모션을 구현해보았습니다.

사실 이 방법으로 모션을 구현하는 것엔 한계가 있습니다. 좀 더 나은 방법으로 intersection observer를 사용하는 방법이 있어서 따로 포스팅을 만들었으니 궁금하신 분들은 참고하세요

 

https://bellmir.tistory.com/37

Intersection Observer를 이용하여 스크롤시 등장 모션 구현하기

 

생각보다 Web API가 잘 되어있어서 요즘은 딱히 라이브러리를 사용하지 않아도 충분히 간단하게 모션 기능을 만들 수 있습니다.

모션이 있고 없고는 퀄리티의 차이가 많이 나기 때문에, 한번씩은 꼭 모션을 넣어보시는걸 추천드려요.

 

 

* 오류 지적은 언제나 환영입니다 :)