SIR
목록으로
이전글 다음글

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

아아무것도모르는퍼블리셔
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 4,653
답변 1
목록
Copy 
<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이 아니더라도 괜찮습니다 ! 할 수 있는 방법이 있다면 알려주시면 너무 감사하겠습니다..

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

#javascript #lottie #bodymovin #html #css

답변 1개

채택된 답변
+20 포인트
Copy 
<!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>

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고