티스토리 뷰
개요
안녕하세요. 오늘은 자바스크립트 스크롤 애니메이션 라이브러리인 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>
|
감사합니다.
'IT > 프로그래밍' 카테고리의 다른 글
| 자바스크립트 이미지 슬라이드 구현하기 (0) | 2021.02.24 |
|---|---|
| 자바스크립트 타이핑 효과 구현하기 (3) | 2021.02.19 |
| [Javascript] 로또번호 추첨하기 (0) | 2020.12.28 |
| 윈도우즈 포트 죽이기 명령어 : kill port on windows system (2) | 2020.12.17 |
| 몽고디비 설치하기 : install mongo server on windows system (0) | 2020.12.17 |