inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

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

846

서가은

작성한 질문수 4

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>

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

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

포트폴리오 HTML/CSS jquery

답변 1

0

코딩웍스(Coding Works)

<script>

    new WOW().init();

</script>

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

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

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

현재도 float 사용은 중요한가요?

1

213

2

웹 호스팅 후 문제

1

240

1

퍼블리셔 코딩테스트 질문입니다.

1

587

1

feather light

1

252

2

skill 섹션 질문

1

256

1

포트폴리오 홈페이지 제작가이드

2

250

1

iframe 질문입니다.

1

211

1

디자인설정

1

333

1

연봉 질문합니다.

1

898

1

폰트, 이미지? 관련 질문입니다

1

311

1

파일질라 카페24? 관련 질문입니다

1

433

1

면접 복장 질문입니다

1

747

1

도메인 연결 오류

1

361

1

개인 포트폴리오 웹사이트 안에 들어갈 포트폴리오 웹사이트 작업물들

1

486

1

카페24 절약형 관련 질문있습니다

1

871

2

기능정의서 html에 첨부하는 방법/header include

1

628

1

prototype 뜻

1

704

1

폴더구조 질문드립니다.<재업로드>

1

430

1

폴더구조 질문드립니다

1

360

1

개인포토폴리오 해상도문제요..!

1

391

1

구글에 검색했을 때 나오는 포트폴리오

2

412

1

wow.js live option

1

440

1

개인 포트폴리오 홈페이지 만들때 UI 포토샵 디자인

1

532

1

featherlight 연결시 링크된 html이 문제가 있어요 ㅠㅠ

1

313

1