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

animate.css 스크롤 될때마다 동작하게 할려면.. 채택완료

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

https://daneden.github.io/animate.css/">https://daneden.github.io/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 포인트
6년 전

스크롤 되었는지 체크할 수 있다면 스크롤 후 fadeInUp 클래스를 삭제 후(removeClass)

다시 추가해주면 됩니다(addClass)

 

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

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

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

로그인