-
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
일분이 잔상
20.05.24 21:05 작성 조회수 191
1
안녕하세요~ 강의 잘 듣고 있습니다!
이번 강의에서 클릭했을 때 일분이 잔상이 나오는 것은 어떻게 하는 건지 궁금합니다!
답변을 작성해보세요.
8
1분코딩
지식공유자2020.05.26
해당 소스의 주소는
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);
});
}
}
답변 1