홈페이지 wow.js 효과 설명

장점

1. Scrollorama와 같은 다른 JavaScript 시차 플러그인보다 작습니다 (환상적인 일을하지만 단순한 요구에 너무 무거울 수 있음)
2. 간단히 설치하고 animate.css와 함께 사용하므로 설정이 매우 빠르다.
3. 빠른 실행이 가능하고 코드가 가볍다.
4. 설정을 변경할 수 있다.

1. animate.css 연결하기

   <link rel="stylesheet" href="css/animate.css" />

   아니면 CDNJS 이용하기

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

2. wow.js 연결 및 실행

   <script src="js/wow.min.js"></script> <script> new WOW().init(); </script>

CSS 애니메이션 적용하기

1. html에 적용하기

   <div class="wow"> Content to Reveal Here </div>

2. 애니메이션 스타일 선택
   Animate.css에서 애니메이션 스타일을 선택한 다음 CSS 클래스를 HTML 요소에 추가한다.

   <div class="wow bounceInUp"> Content to Reveal Here </div>

이러면 끝났다. 한 번 스크롤을 해서 확인을 해보자.

고급 옵션

• data-wow-duration: 애니메이션 기간을 변경
• data-wow-delay: 애니메이션 시작 전에 지연시간 변경
• data-wow-offset: 애니메이션 시작 거리 (브라우저 하단과 관련됨)
• data-wow-iteration: 애니메이션이 반복되는 횟수

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"> </section>

<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"> </section>

사용자 설정

• boxClass: 사용자가 스크롤 할 때 숨겨진 box를 표시하는 클래스 이름이다.
• animateClass: CSS 애니메이션을 트리거하는 클래스 이름 (기본적으로 animate.css 라이브러리의 ‘animated’이다.)
• offset: 브라우저 뷰포트의 하단과 숨겨진 상자의 상단 사이의 거리를 정의한다.
  사용자가 스크롤하여 이 거리에 도달하면 숨겨진 상자가 표시된다.
• mobile: 모바일 기기에서 WOW.js를 켜거나 끌 수 있다.
• live: 페이지에서 새로운 WOW 요소를 주의깊게 확인할 수 있다.

wow = new WOW({ boxClass: 'wow', // 기본값 animateClass: 'animated', // 기본값 offset: 0, // 기본값 mobile: true, // 기본값 live: true // 기본값 }) wow.init();