아래의 소스는 메인페이지에 배너가 fadein 되면서 해당 텍스트도 움직이면서 나오게 하는 소스입니다.
그런데 첫번째 배너에서만 움직이는 텍스트가 정상적으로 나오고, 두번째부터는 텍스트가 움직임 없이 나오네요. 어디를 손봐야 할까요? 조언 부탁드립니다.
<style>
@keyframes up {
0% { transform:translateY(20px); opacity:0; }
100% { transform:none; opacity:1 }
}
@keyframes down {
0% { transform:translateY(-20px); opacity:0; }
100% { transform:none; opacity:1 }
}
</style>
<div class="visual_slider" id="visual" style="position:relative">
<div class="main-carousel owl-carousel">
<div class="li img01">
<div class="copy_area_wrap">
<div class="copy_area">
<h2 style="animation:up .5s .4s forwards; opacity:0;"><strong>text</strong></h2>
</div>
</div>
<p class="cover"></p>
</div>
<div class="li img02">
<div class="copy_area_wrap">
<div class="copy_area">
<h2 style="animation:up .5s .4s forwards; opacity:0;"><strong>text</strong></h2>
</div>
</div>
<p class="cover"></p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.main-carousel').owlCarousel({
items: 1, //보여줄 이미지 갯수
nav: true,
loop: true,
autoplay: true,
autoplayTimeout: 9000,
navText: ["PREV", "NEXT"],
animateIn: 'fadeIn',
animateOut: 'fadeOut'
});
jarallax(document.querySelectorAll('.jarallax'));
});
</script>
답변 1개 / 댓글 3개
cuwaaang애니메이션이 동시에 다 실행되는거같은데요
슬라이더 넘길때 애니메이션이 작동되도록 클래스를 넣는다던가
무한반복 인피니티 옵션을 애니메이션에 추가하던가
딜레이를 넣는다던가 해야 넘길때마다 작동될겁니다.
답변에 대한 댓글 3개
일단 슬라이드가 2개입니다. 한 바퀴 돌면 작동을 안 하네요. 애니메이션을 무한으로 돌리면 9초 동안 계속 움직여서 볼 수가 없고, 어떻게해야 하나요? 고견 부탁드립니다.
답변을 작성하려면 로그인이 필요합니다.