자바스크립트 클릭하면 폭죽 터지는 UI (그냥 만들어봄)

그냥 만들어봤습니다.

아래 영역을 클릭하면 폭죽(?) 색종이가 터집니다.

이곳을 클릭해 보세요!

(제 컴퓨터에서는 잘 터지는데 안터지면 댓글 남겨주세요)

 

아래는 전체 코드입니다.

(lottie 애니메이션 활용)

 

<style>
dotlottie-player{
  position: fixed;
  width: 400px;
  height: 400px;
  z-index: 99;
  transform: translate(-50%, -50%);
}
</style>

<script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>

<script>
class LottiUI {
	constructor(x, y) {
  	const div = document.createElement('dotlottie-player');
    div.setAttribute('src', 'https://lottie.host/824cb754-a11a-4458-bba0-1f5129c3ed76/NuLW5jGi8g.lottie');
    div.setAttribute('background', 'transparent');
    div.setAttribute('speed', '1');
    div.setAttribute('loop', true);
    div.setAttribute('autoplay', true);
    div.style.cssText = 'top: ' + y + 'px; left: ' + x + 'px';
    document.body.append(div);
    
    setTimeout(() => {
    	div.remove();
    }, 3000);
  }
}

document.addEventListener('pointerdown', event => {
	const x = event.clientX;
  const y = event.clientY;
  new LottiUI(x, y);
});
</script>

 

 

(광고 클릭은 제작에 큰 도움이 됩니다.)