본문 바로가기
Js

Lottie json 파일 단순 마우스 오버 효과

by 영감은어디에 2024. 10. 17.

<div class="box">
    <lottie-player class="anibox" src="./smallRound1.json" ></lottie-player>
</div>
<div class="box">
    <lottie-player class="anibox" src="./smallRound2.json" ></lottie-player>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js"></script>
<script>
const players = document.querySelectorAll('.anibox');
players.forEach(player => {
    player.addEventListener('mouseenter', () => {
        player.play(); 
    });
    player.addEventListener('mouseleave', () => {
        player.stop(); 
        player.goToFrame(0); 
    });
});
</script>

'Js' 카테고리의 다른 글

replace(), 유튜브 클릭시 오토플레이  (0) 2024.07.17
숫자 카운터  (0) 2024.07.17
hasClass를 이용한 이미지 체인지  (0) 2024.07.17
throttle(), clone()  (0) 2024.07.17
lottieFiles  (0) 2024.07.15
Lottie.js, scroll 연동  (0) 2024.07.15
swiper.on('slideChange'), letters  (1) 2024.07.14
gsap, draggable, photoswipe  (0) 2024.07.10