테스트 사이트 - 개발 중인 베타 버전입니다

animate 스크롤 위치에 따라 매번 재생할려면.. 채택완료

다조아해 6년 전 조회 3,493

animate css를 사용해서 fadeInUp 애니 효과를 주고 있는데

한번은 적용이 잘 됩니다.

스크롤을 한번 내리면 잘 되는데..

다시 스크롤 올렸다가 그 적용 위치로 가면 다시 안됩니다.

 

스크롤을 위아래로 내릴때마다 매번 새롭게 fadeInUp이 적용 되게 할려면 아래 소스를 어찌 수정해야 할까요?

 

 

애니 css 페이지 적용

</strong></p>

<p><div class="col-lg-9  wow fadeInUp"></p>

<p>안녕하세요. 반가워요</p>

<p></div></p>

<p><strong>

 

animate.css

</strong></p>

<p>@-webkit-keyframes fadeInUp {

  0% {

    opacity: 0;

    -webkit-transform: translateY(20px);

    transform: translateY(20px);

  }</p>

<p>  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}</p>

<p>@keyframes fadeInUp {

  0% {

    opacity: 0;

    -webkit-transform: translateY(20px);

    -ms-transform: translateY(20px);

    transform: translateY(20px);

  }</p>

<p>  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

  }

}</p>

<p>.fadeInUp {

  -webkit-animation-name: fadeInUp;

  animation-name: fadeInUp;

}</p>

<p><strong>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
razogol
6년 전

재생각은

javascript 를 이용해서

보이는 시점에서 addClass("fadeInUp")

다시 안보이면 removeClass("fadeInUp") 이런식으로 동적으로 하셔야 될것 같습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인