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>
부드럽게 움직이지는 않지만... 뭐 전환정도는.....되니... 다음분게 패스~ ㅋㅋ
답변을 작성하시기 전에 로그인 해주세요.