[정적인 홈페이지에 적절한 CSS 애니메이션을 넣는 Scroll Reveal Animation]
공식 웹사이트
https://wowjs.uk
wow.js — Reveal Animations When Scrolling
wowjs.uk
활용용도
- 정적인 웹페이지에 과하지 않고 세련된 컨텐츠를 보여주는 애니메이션
장점
- 간단하면서 스크립트 옵션 조절을 거의 하지 않음
특징
- 내가 만든 다양한 CSS 키프레임 애니메이션을 충분히 활용
유사 플러그인
- AOS.js(Animation On Scroll)
적용방법
1. html 구조 만들기 / CSS 키프레임 만들기
2. 그 애니메이션이 적용되는 클래스 만들기(중복 사용 위해)
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<div class="wow">
Content to Reveal Here
</div>
옵션조정
wow = new WOW({
boxClass: 'wow', // default
offset: 0, // default
mobile: true, // default
live: true // default
})
wow.init();
적용예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[플러그인 사용방법] 스크롤하면 시작하는 애니메이션 - Wow.js & AOS,js</title>
<script src="wow.min.js"></script>
<style>
.parent {
border: 1px solid #000;
width: 800px;
padding: 20px;
overflow: hidden;
}
.parent div {
float: left;
border: 3px solid red;
width: 50%;
height: 200px;
box-sizing: border-box;
text-align: center;
line-height: 200px;
font-size: 3em;
}
.ltr {
animation: ltr 1s linear both;
/* both - 애니메이션 기본속성은 0% -> 100% 까지 가면 다시 0%로 스탠바이를 하는데 그걸 하지 말라고 하는 속성 */
}
.rtl {
animation: rtl 1s linear both;
}
@keyframes ltr {
0% {
opacity: 0;
transform: translateX(-150px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes rtl {
0% {
opacity: 0;
transform: translateX(150px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
</style>
</head>
<body>
<h1>Scroll Reveal Animation</h1>
<img src="https://via.placeholder.com/800x1500">
<div class="parent">
<div class="left ltr wow">left</div>
<div class="right rtl wow">right</div>
</div>
<img src="https://via.placeholder.com/800x1500">
<div class="parent">
<div class="left ltr wow">left</div>
<div class="right rtl wow">right</div>
</div>
<script>
wow = new WOW({
boxClass: 'wow', // default
offset: 150, // default //스크롤px 보통 150~200 정도
mobile: true, // default //모바일에서 s안 쓴다면 false
live: true // default
})
wow.init();
</script>
</body>
</html>