움직이는 텍스트

움직이는 텍스트

QA

움직이는 텍스트

답변 1

본문

아래의 소스는 메인페이지에 배너가 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

애니메이션이 동시에 다 실행되는거같은데요

슬라이더 넘길때 애니메이션이 작동되도록 클래스를 넣는다던가

무한반복 인피니티 옵션을 애니메이션에 추가하던가

딜레이를 넣는다던가 해야 넘길때마다 작동될겁니다.

각 슬라이드의 시간이 9초로 세팅 되어서 animation-delay: 9s; 로 잘 보이긴 하는데 문제가 있네요.
일단 슬라이드가 2개입니다. 한 바퀴 돌면 작동을 안 하네요. 애니메이션을 무한으로 돌리면 9초 동안 계속 움직여서 볼 수가 없고, 어떻게해야 하나요? 고견 부탁드립니다.

크롬에서 개발자 모드로 슬라이드를 보니 슬라이딩 되는 div에 active 클래스가 붙더라구요, 그래서 css에 .active 추가해서 animation:up .5s .4s forwards; opacity:0;animation-delay: 1s; 요렇게 넣어 줬더니 아주 잘되네요. 감사합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 44
© SIRSOFT
현재 페이지 제일 처음으로