<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 |