lottie영상 두개를 번갈아서 나오게 하는 방법이 있을까요?

lottie영상 두개를 번갈아서 나오게 하는 방법이 있을까요?

QA

lottie영상 두개를 번갈아서 나오게 하는 방법이 있을까요?

본문


<div id="banner">
     <video id="banner-video" muted autoplay loop playsinline>
           <source src="./video/영상.mp4">
     </video>
     <div id="banner-lottie"></div>
     <div id="banner-lottie2"></div>
</div>

 

안녕하세요 !

 

제가 위 코드에서 bodymovin을 사용해서 처음에 #banner-lottie의 lottie영상이 나왔다가 자연스럽게 사라진 다음에 #banner-lottie2의 lottie영상이 또 자연스럽게 나오게 하는 방법이 있을까요?ㅜㅜ 그리고 그걸 계속 반복하게끔 하고싶습니다 !! 

 

꼭 bodymovin이 아니더라도 괜찮습니다 ! 할 수 있는 방법이 있다면 알려주시면 너무 감사하겠습니다..

감사합니다 좋은 하루되세요 !

 

 

 

이 질문에 댓글 쓰기 :

답변 1


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<div id="banner-lottie" style='position:absolute; left:0; top:0; width:200px;'></div>
<div id="banner-lottie2" style="position:absolute; left:0; top:0;  width:200px;opacity: 0; "></div>
<script>
// JavaScript 코드
// lottie 라이브러리 가져오기
const lottie1 = lottie.loadAnimation({
  container: document.getElementById('banner-lottie'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://assets9.lottiefiles.com/packages/lf20_PBgNop.json',
});
const lottie2 = lottie.loadAnimation({
  container: document.getElementById('banner-lottie2'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json',
});
// 첫 번째 lottie 애니메이션 실행
lottie1.play();
setInterval(() => {
  // 첫 번째 lottie 애니메이션 종료
  lottie1.stop();
  // 첫 번째 lottie 숨기고 두 번째 lottie 노출
  document.getElementById('banner-lottie').style.opacity = 0;
  document.getElementById('banner-lottie2').style.opacity = 1;
  // 두 번째 lottie 애니메이션 실행
  lottie2.play();
  // 두 번째 lottie 애니메이션 종료
  lottie2.addEventListener('complete', () => {
    // 두 번째 lottie 숨기고 첫 번째 lottie 노출
    document.getElementById('banner-lottie2').style.opacity = 0;
    document.getElementById('banner-lottie').style.opacity = 1;
    // 두 번째 lottie 애니메이션 종료
    lottie2.stop();
    // 첫 번째 lottie 애니메이션 실행
    lottie1.play();
  });
}, 5000);
</script>
 </body>
</html>

 

부드럽게 움직이지는 않지만... 뭐 전환정도는.....되니... 다음분게 패스~ ㅋㅋ

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

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