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

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

QA

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

본문

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

한번은 적용이 잘 됩니다.

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

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

 

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

 

 

애니 css 페이지 적용


<div class="col-lg-9  wow fadeInUp">
안녕하세요. 반가워요
</div>

 

animate.css


@-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;
}

이 질문에 댓글 쓰기 :

답변 1

재생각은

javascript 를 이용해서

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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 194
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT