카테고리

질문 & 답변
세부 분야

웹 개발
해결 여부

미해결

wow.js 애니메이션 질문

21.04.21 20:36 작성 조회수 742

선생님 안녕하세요!

혹시 wow.js는 스크롤을 다시 올렸다가 내리면 작동이 되지는 않나요?

반응형 웹사이트 포트폴리오(App Official Landing Website)

[플러그인 사용방법] 스크롤하면 시작되는 애니메이션 - Wow.js & AOS.js

강의실 바로가기

답변 2

좋아요순

최신순

답변을 작성해보세요.

코딩웍스(Coding Works)

지식공유자

2021.04.21

<!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>