IT/프로그래밍

WOW.js 사용법 : 스크롤 애니메이션 라이브러리

탐구소년 2021. 2. 11. 21:54

 

 

개요

 

안녕하세요. 오늘은 자바스크립트 스크롤 애니메이션 라이브러리인 WOW.js의 사용법에 대해 정리해보려고 합니다. 다양한 종류의 애니메이션을 제공하는데다 사용법도 무척 간단해 개인적으로 강력 추천하는 라이브러리입니다. 그럼 바로 시작하도록 하겠습니다. 

 

설치

 

WOW.js 의 메인 페이지로 이동합니다. 

링크를 클릭 : wowjs.uk/

 

그러면 위와 같은 페이지가 나타나는데, 여기에서 좌측 상단에 표시되는 메뉴 중 GITHUB 을 클릭합니다. 그러면 새 탭이 열리고 라이브러리를 다운로드할 수 있는 깃헙 저장소가 나타납니다.

 

 

깃헙 저장소 페이지를 보면 Code라고 적힌 초록색 버튼이 보이는데, 이를 클릭하면 박스가 하나 열립니다. 이 박스의 맨 아래에는 Download ZIP 이라는 메뉴가 있습니다. 이를 클릭하면 WOW.js의 라이브러리 파일들이 담긴 압축파일이 다운로드됩니다. 

 

 

다운로드한 ZIP 파일의 압축을 풀고 나면 위와 같은 구성의 폴더를 확인하실 수 있습니다. 여기에서 애니메이션 적용을 위해 사용자가 사용해야할 파일은 두 가지입니다. 

 

 

첫 번째는 dist 폴더 내에 있는 wow.min.js 파일입니다. 라이브러리의 핵심 기능이 작성되어 있는 자바스크립트 파일로, wow.js를 사용해도 되지만 min 버전의 용량이 더 가볍고 기능은 동일하기에 min 버전을 추천합니다. 

 

 

두 번째는 css 폴더 > libs 폴더 내에 있는 animate.css 파일입니다. 이는 애니메이션 동작이 정의되어 있는 파일입니다. 

 

 

위에서 소개한 두 파일을 html 파일과 함께 사용해주면 됩니다. 

 

 

 

사용법 

 

WOW 애니메이션이 적용된 html 문서를 만들기 위해서는 기본적으로 다음과 같은 준비가 되어있어야 합니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
  content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="animate.css" rel="stylesheet">
  <title>WOWJS</title>
</head>
<body>
  
  <script src="wow.min.js"></script>
  <script>
    new WOW().init();
  </script>
</body>
</html>

위 코드의 8번 줄에서는 CSS 파일을 연결해주고 있고, 13번 줄에서는 JS 파일을 연결해주고 있습니다. 그리고 14~16번 줄의 스크립트에서는 WOW 라이브러리의 초기화 함수인 init()를 호출해주고 있습니다. 이는 WOW 를 활성화시켜 주는 것으로, 여기까지 하고 나면 WOW 적용 준비가 끝납니다. 

 

 

이제 요소에 WOW 애니메이션 적용을 해주겠습니다. 기본 형태는 다음과 같습니다. 

1
<태그 class="wow 애니메이션_이름">애니메이션</태그>

위 코드에서 애니메이션_이름 이라 표시되어 있는 부분에 적용하고자 하는 애니메이션 이름을 넣어주면, WOW 라이브러리에 의해 애니메이션이 적용됩니다. 사용 가능한 애니메이션의 종류는 무척 다양한데, 이에 대한 리스트는 아래 링크에서 확인하실 수 있습니다. 

애니메이션 목록 링크 : animate.style/

 

 

아래는 두개의  h1 태그에 flash 라는 애니메이션과 pulse라는 애니메이션을 각각 적용한 예입니다. flash는 깜빡거리는 애니메이션, pulse는 커졌다 작아졌다 하는 애니메이션입니다.

1
2
<h1 class="wow flash">플래시</h1>
<h1 class="wow pulse">펄스</h1>

여기까지, WOW.js 라이브러리를 사용해 애니메이션 효과를 구현하기 위한 절차를 마치겠습니다. 마지막으로, 전체 코드를 보이면서 마무리짓도록 하겠습니다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
  content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="animate.css" rel="stylesheet">
  <title>WOWJS</title>
</head>
<body>
  <h1 class="wow flash">플래시</h1>
  <h1 class="wow pulse">펄스</h1>
  <script src="wow.min.js"></script>
  <script>
    new WOW().init();
  </script>
</body>
</html>

 

감사합니다.