
<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' 카테고리의 다른 글
원페이지 스크롤 (0) | 2025.03.03 |
---|---|
menu bar mouse move (0) | 2025.02.25 |
폴리곤. 컬러 로테이션 hue-rotate (0) | 2025.02.24 |
createElement, mouse move (0) | 2025.02.23 |
replace(), 유튜브 클릭시 오토플레이 (0) | 2024.07.17 |
숫자 카운터 (0) | 2024.07.17 |
hasClass를 이용한 이미지 체인지 (0) | 2024.07.17 |
throttle(), clone() (0) | 2024.07.17 |