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

다조아해

2019-08-26 (월) 09:21:11 3,945

https://daneden.github.io/animate.css/

이런 애니를 동작하면 스크롤을 한번 내릴때만 동작되고 다시 올리면 동작안되는데..

스크롤 업다운 시킬때마다 반응하게 할려면 어찌 해야 할까요?

Copy

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

그누보드5

답변 1개

채택된 답변

+20 포인트

균이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2019-08-26 (월) 14:42:38

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

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

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

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

답변 1개

공유하기