인프런 커뮤니티 질문&답변
작성한 질문수
답변 2
2
코딩웍스(Coding Works)
지식공유자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AOS.js</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- AOS.js CDN -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<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;
}
</style>
</head>
<body>
<h1>Scroll Reveal Animation : AOS.js</h1>
<img src="http://placehold.it/850x1500">
<div class="parent">
<div data-aos="fade-right" data-aos-duration="1000">left</div>
<div data-aos="fade-left" data-aos-duration="1000">right</div>
</div>
<img src="http://placehold.it/850x1500">
<script>
AOS.init();
</script>
<!--
AOS.js 옵션
애니메이션을 원하는 요소에 아래 속성을 추가하시면 됩니다.
애니메이션 속도 : data-aos-duration="3000"
애니메이션 이징 : data-aos-easing="linear"
애니메이션 시작위치 : data-aos-offset="300"
애니메이션 지연시간 : data-aos-delay="300"
AOS.js 공식사이트
https://michalsnik.github.io/aos/
-->
</body>
</html>
2
코딩웍스(Coding Works)
지식공유자
wow.js 공식사이트에서 animation repeat는 지원하는 옵션이 없습니다.
혹시나 해서 구글링해서 해외에서 같은 이슈를 검색해봤는데 찾을 수가 없네요.
만약 반복 애니메이션을 원하시면 AOS.js를 사용해보세요. 아래 공식사이트입니다.
https://michalsnik.github.io/aos/
혹시나 해서 제가 AOS.js 사용법을 프로토타입으로 아래 글에 풀코드 올려놓을게요. 복사해서 사용해보세요.
자세한 설명에 항상 감사드려요 선생님.. ㅠㅠ 항상 재밌게 공부하고 있습니다!