[library] wow.js 사용 방법

wow.js — Reveal Animations When Scrolling

wowjs.uk

1. 사이트에 접속하여 깃허브에서

dist > wow.js 또는 wow.min.js 다운로드

libs > animate.css 다운로드

2. wow.js를 적용할 html파일에 모두 링크해준다.

<head>
	<script src="js/wow.js"></script>
	<link rel="stylesheet" href="css/animate.css">
</head>

3. js파일에 아래처럼 작성해준다.

$("document").ready(function(){
  
  new WOW().init();
  
})

또는 html파일 body영역에 아래처럼 작성

<body>
  <script>
    new WOW().init();
  </script>
</body>

4. 적용하고 싶은 요소에 wow 클래스와 animate 속성을 추가한다.

속성은 https://animate.style/ 에서 확인할 수 있다.

복사하여 적용시 animate__ 는 지우고 사용한다.

<div class="box wow fadeIn" data-wow-delay="0.1s">
	<p>HAPPY CODE</p>
</div>

box라는 클래스는 01초뒤에 fadeIn효과가 적용되어 나타난다.

delay처럼 wow에 사용할 수 있는 옵션은 4가지가 있다.

data-wow-duration

- 애니메이션이 실행(지속)되는 시간 설정

data-wow-delay

- 페이지 로딩 후 애니메이션이 실행되기까지 시간 설정

data-wow-offset

- 요소가 어느 정도 올라왔을 때 애니메이션이 실행될지 지정

data-wow-iteration

- 애니메이션 반복 횟수 설정

wow.js 는 따로 설정하지 않아도 해당 요소 영역에 스크롤이 왔을 때

이벤트가 작동하기 때문에 웹페이지를 꾸며주기에 아주 간편한 플러그인이다.

[design] 프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역) (0)	2022.05.13
[plug-in] Fullpage.js 사용 방법 (0)	2022.01.10
[Visual Studio Code] 해당 요소의 CSS속성 바로 보기 - CSS PEEK (0)	2021.11.27
[Visual Studio Code] 코드 괄호 색상 - Bracket Pair Colorizer (0)	2021.11.27
[design] 레퍼런스 참고하기 좋은 사이트 (0)	2021.11.27

happy code