티스토리 뷰
심심해서 만들어 본 코드인데, 이것보다 더 좋은 방법이 분명히 있을 거라는 걸 느끼면서도 머리가 안 굴러가서 일단 이대로 올려봅니다. 블로그가 너무 오랫동안 놀고 있다는 사실에 약간의 압박감(또는 자책감)을 느꼈다고나 할까...?
마우스로 브라우저 화면 중 어딘가를 클릭하면, 그 위치에 잠시동안 잔상이 생겼다가 사라지는 프론트엔드 코드입니다. 마우스 클릭 시마다 잔상을 남기는 div.pointer 요소가 새로 생기고, 기존의 div.pointer 요소는 제거되는 방식으로 동작합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클릭하면 잔상이 남는다</title>
<style>
*{
pointer-events: none;
}
.pointer {
position: fixed;
width: 30px;
height: 30px;
margin: -20px 0 0 -20px;
border-radius: 50%;
/*
이미지 잔상을 남기려면
background: url('이미지소스') no-repeat 0 0 / cover;
*/
background-color: orange;
animation: pointer-ani 0.5s linear;
animation-fill-mode: forwards;
}
@keyframes pointer-ani {
0% { transform: scale(0); }
100% { transform: scale(1); opacity: 0; }
}
</style>
</head>
<body>
<script>
function setPointer(){
window.addEventListener('click', function(e){
const oldPointer = document.querySelector('.pointer')
const pointer = document.createElement('div')
pointer.style.left = `${e.layerX}px`
pointer.style.top = `${e.layerY}px`
pointer.classList.add('pointer')
oldPointer ?
document.body.replaceChild(pointer, oldPointer) :
document.body.appendChild(pointer)
})
}
window.addEventListener("DOMContentLoaded", setPointer)
</script>
</body>
</html>
|
'IT > CSS' 카테고리의 다른 글
| [CSS] position 속성 사용 시 left right 또는 top bottom 속성을 동시에 사용하면? (0) | 2021.05.19 |
|---|---|
| [CSS] linear-gradient 사용법 그리고 예제 (1) | 2021.05.01 |
| [CSS] 모달창 + 어두운 배경 반드는 기본적인 방법 (1) | 2020.12.30 |
| [CSS] 007 효과 애니메이션 구현하기 (0) | 2020.12.11 |
| [CSS] 타이핑 효과 애니메이션 구현하기 (0) | 2020.12.09 |
댓글
공지사항