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") 이런식으로 동적으로 하셔야 될것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.