요즘 웬만한 웹페이지에는 애니메이션(animation)이 따라 붙습니다. 가만히 멈춰 있는 것 보다는 무언가 움직임이 느껴지는 편이 좀 더 사용자의 시선을 끌 수 있고 집중도 높일 수 있기 때문에 아주 단순한 웹페이지에서 조차도 애니메이션이 들어가곤 합니다.
특히 랜딩페이지 같은 경우는 무엇보다 주목을 끌 필요가 크고 또 한 페이지에 길게 늘여 뜨리는 방식으로 콘텐츠를 나열하다 보니 스크롤에 기반하여 애니메이션이 작동하게 만드는 경우가 많습니다.
이 글에서는 랜딩페이지 같은 곳에서 사용하면 좋을 스크롤과 함께 작동하는 간단한 애니메이션을 한번 만들어 보기로 하겠습니다.
스크롤 애니메이션의 작동 원리
우선 기본 원리부터 소개하죠.
웹브라우저는 사용자가 브라우저 화면을 스크롤(scroll) 할 때 마다 ‘scroll’ 이벤트를 발생시킵니다. 이 이벤트에 반응하여 무언가 애니메이션이 작동하게 만드는 것이 스크롤 애니메이션의 기본 동작이죠.
예를 들어, jQuery 라이브러리를 사용한다면 다음과 같이 scroll 이벤트를 받아서 필요한 처리를 할 수 있습니다. 스크롤이 일정한 지점에 이르면 무언가 애니메이션이 발생하게끔 만들면 되죠.
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
// apply effects and animations
}
});
하지만 이런 식으로 일일이 코딩을 하는 것은 생산적인 방법이 못됩니다. 왜냐면 이미 시중에는 어마어마하게 많은 도구(라이브러리)들이 나와 있게 때문입니다.
WOW.js
WOW.js 라는 도구를 한번 써 보기로 하죠.
특별히 WOW.js를 선택한 까닭은 없으며, 그저 이 라이브러리가 다루기 쉽기 때문입니다. (나중에 유사한 다른 라이브러리들도 소개하겠습니다)
사이트에 접속해서 웹페이지를 스크롤해 보면 이런 저런 모양들이 이리 저리 움직이는 것을 볼 수 있을 것입니다. 사용법은 정말지기 간단합니다. 내가 스크롤 애니메이션을 적용하려는 HTML 요소에 “wow”라는 이름의 클래스명만 추가해 주면 됩니다.
<div class="wow">
Content to Reveal Here
</div>
그러면 이제 이 요소가 스크롤되어 화면에 표시될 때 지정된 애니메이션이 함께 동작합니다. 앞서 그냥 “wow”라고 붙이면 기본으로 리빌(reveal) 애니메이션이 실행되며, 만약 다른 애니메이션을 적용하려면 “wow bounceInUp” 과 같은 식으로 적용할 애니메이션 이름을 붙여 주면 됩니다.
<div class="wow bounceInUp">
Content to Reveal Here
</div>
Animate.css
이 때 “wow” 뒤에 붙은 애니메이션 이름값은 Animate.css 라이브러리에서 정한 바로 그 값입니다.
WOW.js는 이 Animate.css 파일과 연동하여 애니메이션 처리를 하게 됩니다. 즉 WOW.js가 하는 일은 특정 스크롤 지점에 이르면 지정한 애니메이션 효과를 호출하는 일이며, 실제 애니메이션 처리는 바로 이 Animate.css가 담당하는 셈이죠.
이렇게 간단한 2가지 도구의 조합만으로도 우리는 웹사이트나 랜딩페이지에 간단하게 멋진 스크롤 애니메이션을 추가해 넣을 수 있습니다.
WOW.js를 트위터 부트스트랩(Bootstrap) 과 함께 사용한 간단한 예제는 아래 CodePen을 참고하면 좋겠습니다.
유사한 도구들
앞서 말했듯, 사실 스크롤과 함께 작동하는 애니메이션 라이브러리들은 WOW.js 말고도 많습니다. 그 중 제가 아는 몇 가지만 소개하면 다음과 같습니다.
- Kissui.scrollanim – CSS3 and JavaScript scroll animation
- ScrollTrigger – Scroll based animations with ease
- AOS – Animate on scroll library
그 밖에 Animate.css 역시 유사한 기능을 제공하는 라이브러리들이 많습니다. WOW.js와 함께 사용할 때 굳이 Animate.css 아니더라도 이런 도구들을 함께 사용할 수도 있을 것입니다.
참고하세요! 🙂
