inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

wow.js 애니메이션 질문

1003

ohl0226

작성한 질문수 14

1

선생님 안녕하세요!

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

jquery HTML/CSS 반응형-웹

답변 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>

0

ohl0226

자세한 설명에 항상 감사드려요 선생님.. ㅠㅠ 항상 재밌게 공부하고 있습니다! 

2

코딩웍스(Coding Works)

wow.js 공식사이트에서 animation repeat는 지원하는 옵션이 없습니다.

혹시나 해서 구글링해서 해외에서 같은 이슈를 검색해봤는데 찾을 수가 없네요.

만약 반복 애니메이션을 원하시면 AOS.js를 사용해보세요. 아래 공식사이트입니다.

https://michalsnik.github.io/aos/

혹시나 해서 제가 AOS.js 사용법을 프로토타입으로 아래 글에 풀코드 올려놓을게요. 복사해서 사용해보세요.

하드코딩으로 이미지맵(image map) 만들기

1

79

2

슬릭 슬라이더

1

147

2

position: fixed; 가 안먹혀요..뭐가 문제일까요?

1

167

1

반응형 fixed 안먹히는 문제

1

264

2

선생님

2

154

1

.news-thum .date 위치가 안맞아요

1

245

2

TypeIt - Welcome 부분이 적용이 안됩니다..

1

368

2

Scroll Reveal Animation 적용이 안되요

1

362

1

완성 후 각 섹션 display:none 주석 시 문제

1

384

3

브라우저를 줄일 때 화면 깨짐

1

631

2

welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.

1

340

1

제이쿼리 탭메뉴 클릭 질문

1

236

1

질문있습니다

1

548

1

질문있습니다.

2

646

2

슬릭슬라이더가 왜 안되는지 모르겠습니다

1

620

1

slick slider와 .ceo-content영역 겹침

1

719

1

span .badge 부분 참고하실분 하세요

2

333

1

플렉스를 안주고 그냥 패딩을 줘도 되지 않나요

1

330

1

창을 줄이면 위치가 이동되는 백그라운드 이미지

1

531

1

크롬창을 줄어들면 이미지가 작아짐

1

742

1

scroll behavior 오류

1

263

1

선생님 코딩좀 봐주세요..

1

398

3

왜 전 선생님과 화면이 다를까요?

1

364

3

따라했는데 이상합니ㅏㄷ..ㅠ

1

291

2