티스토리 뷰
WebPublisher/JavaScript & jQuery
[lottie] lottie 라이브러리 활용해 data-type별로 다른 lottie 애니메이션 적용하기
amanda 2025. 6. 8. 21:26<div class="lottie_wrap" data-type="type01">
<div id="lottie"></div>
</div>
setLottieAni();
function setLottieAni() {
const lottieContainer = document.getElementById('lottie');
const lottieWrap = lottieContainer.closest('.lottie_wrap');
if (!lottieWrap) return;
// data-type 속성값 읽기
const typeValue = lottieWrap.getAttribute('data-type');
if (!typeValue) {
console.warn('data-type 속성이 지정되지 않았습니다.');
return;
}
const animationPath = `./lottie_${typeValue}.json`;
// Lottie 애니메이션 로드
bodymovin.loadAnimation({
container: lottieContainer,
renderer: 'svg',
loop: true,
autoplay: true,
path: animationPath
});
}
'WebPublisher > JavaScript & jQuery' 카테고리의 다른 글
[SVG] stroke-dasharray와 stroke-dashoffset을 활용한 파이 차트 프로그레스바 만들기 (0) | 2025.05.09 |
---|---|
[youtube] 유튜브 구간 반복 재생 api 삽입 (0) | 2025.03.03 |
[jQuery] scroll 시 해당 section에 active 클래스 추가 (0) | 2024.11.14 |
[jQuery] 따라다니는 내비게이션 sticky navigation menu (0) | 2024.11.14 |
[javaScript] jQuery로 modal 창 띄우기 (0) | 2024.11.08 |
공지사항