움직이는 텍스트

움직이는 텍스트

QA

움직이는 텍스트

본문

아래의 소스는 메인페이지에 배너가 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; 요렇게 넣어 줬더니 아주 잘되네요. 감사합니다.

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

회원로그인

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