안녕하세요 오늘은 스크롤내리면 나타나는 애니메이션 라이브러리인 wow.js의 사용법에 대해 알아보려고 합니다.
간단한 사용법과 다양한 애니메이션효과를 제공합니다.
공식사이트
wow.js — Reveal Animations When Scrolling
wowjs.uk
설치방법
https://github.com/graingert/wow
GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page
Reveal CSS animation as you scroll down a page. Contribute to graingert/WOW development by creating an account on GitHub.
github.com
wow.js 깃허브에 들어가서 다운로드해줍니다.
dist폴더안에 wow.js이나 wow.min.js를 사용할 디렉토리에 넣어줍니다.
wow.js는 animate.css와 함께 사용되는데요.
에서 다운받을 수 있습니다.
혹은 아래의 CDN을 사용해주시면 됩니다.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
사용방법
<div class="wow animate__animated animate__fadeInLeft">HELLO</div>
<div class="wow animate__animated animate__fadeInRight">HELLO</div>스크롤애니메이션을 사용할 곳에 class를 넣어줍니다. wow와 animate__animated는 기본으로 들어가야할 class입니다.
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
다음으로 위의 사이트에 접속해 사용할 애니메이션 효과를 복사에 class에 넣어주면 됩니다.
js
<script>
new WOW().init();
</script>마지막으로 위의 코드를 복사해 넣어주면 스크롤 내리면 나타나는 애니메이션을 간단하게 구현할 수 있습니다.
'Web > jquery' 카테고리의 다른 글
| [jquery] slick slider 사용 방법[예제] (1) | 2023.03.10 |
|---|---|
| 간단한 스크롤 애니메이션 aos.js (0) | 2023.03.10 |
| [jquery] 스크롤 내리면 상단고정, 스타일 변경되는 메뉴 (7) | 2022.08.30 |
| [jquery] 레이어 팝업 스크롤 막기 & 배경 어둡게 처리하기 (0) | 2022.03.28 |
| [jQuery] 특정위치에서 시작하는 스크롤 네비게이션 (2) | 2021.04.27 |