• 카테고리

    질문 & 답변

  • 세부 분야

    취업 · 이직

  • 해결 여부

    미해결

스크롤시에 효과가 안뜨고, 미리 떠버리는 현상...

22.04.09 22:10 작성 조회수 528

1

<!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>Scroll Reveal Animation</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="js/wow.min.js"></script>
  <style>
    .parent {
      width: 800px;
      border: 1px solid #000;
      padding: 20px;
      overflow: hidden;
    }
    .parent div {
      float: left;
      width: 50%;
      height: 200px;
      border: 3px solid red;
      box-sizing: border-box;
      line-height: 200px;
      text-align: center;
      font-size: 3em;
    }
    .ltr {
      animation: ltr 1s linear both;
    }
    .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>스크롤시 애니메이션 넣기</h1>
  <img src="http://via.placeholder.com/300x800">
  <div class="parent">
   <div class="left wow ltr">left</div>
    <div class="right wow rtl">right</div>  
  </div>
  <script>
    new WOW().init();
  </script>
</body>
</html>

스크롤시 효과가 뜨는게 아니라, 그냥 미리 떠버립니다. .

아예 처음부터 다시 시작하면서 계속 오류 찾아도 보이지 않아요ㅠㅠ

course-thumbnail

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

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

강의실 바로가기

답변 1

답변을 작성해보세요.

0

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2022.04.10

<script>

    new WOW().init();

</script>

위의 스크립트 부분을 영상에 있는 것 처럼 하셔야 합니다.

영상에는 스크립트 작동하는 옵션이 있는데 그냥  new WOW().init(); 이렇게만 넣으시면 안됩니다.

다음에는 영상에 있는대로 충분히 따라하시고 안되는 경우에 질문 주세요.

이 글과 비슷한 Q&A