웹 페이지에 lottie 파일 적용해보기

👀 lottie 

 

 

 

 

 

디자이너 분께서 lottie json을 만들어주셨다.

 

 

 

✅ html 페이지에 적용해보자 

 

 

📌 공식문서 보기

Lottie Docs

로티  : 에어비앤비에서 개발한 라이브러리

애니메이션은 백터 기반, svg로 저장 된다.

 

 

 

📌 CDN

https://cdnjs.com/libraries/lottie-web

lottie-web - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js" integrity="sha512-jEnuDt6jfecCjthQAJ+ed0MTVA++5ZKmlUcmDGBv2vUI/REn6FuIdixLNnQT+vKusE2hhTk2is3cFvv5wA+Sgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

✔ html

<div class="lottie-container" id="lottie">
    
</div>

로티 애니메이션이 들어갈 공간을 만들어준다.

 

✔  js

let anmation = bodymovin.loadAnimation({
    container : document.getElementById('lottie'),
    renderer : 'svg',
    loop : false, //반복재생
    autoplay : true //자동재생
    path : 'data.json', // 파일 경로 넣거나
    animationData :animationData // 직접 객체정보를 넣거나
});

 

전달받은 애니메이션 json 파일을 경로 지정하여 불러오면 된다.

 

 

🎉 끝

 

 

---

 

🌌 

간단하게 글을 작성하지만 실제로는 이틀이 걸렸다. 

악명높은 cors를 마주하였기에..

cors 관련 글은.. 나중에 차차 풀어보도록 해보자

 

 

 

---

https://lottiefiles.com/kr/blog/about-lottie/kr-how-to-add-lottie-animation-in-web-page-html