작성한 질문수 4

8

해당 소스의 주소는

https://www.notion.so/4efb427f10a141088de833f6ec20ac1e

여기에 있고요,
여기서
<script src="IlbuniPointer.js"></script>
이렇게 연결한 부분이 일분이 포인터가 나오는 소스인데요,
아래에 소스를 붙여드릴게요^^
클릭한 위치에 div가 붙고, 이후 CSS 애니메이션으로 부드럽게 사라지는 방식이에요~

class IlbuniPointer {
	constructor() {
		let elem = document.createElement('div');
		let timerId;

		elem.style.cssText = `
			position: absolute;
			left: 0;
			top: 0;
			width: 60px;
			height: 60px;
			margin: -30px 0 0 -30px;
			border-radius: 50%;
			background: url('./images/ilbuni2.png') no-repeat 0 0 / cover;
			transform: scale(0);
		`;

		document.body.appendChild(elem);

		window.addEventListener('click', e => {
			elem.style.animation = 'pointer-ani 0.5s linear';
			elem.style.left = `${e.clientX}px`;
			elem.style.top = `${e.clientY}px`;
			timerId = setTimeout(() => {
				elem.style.animation = 'none';
				clearTimeout(timerId);
				timerId = null;
			}, 500);
		});
	}
}