I’m trying to make an div which follows your cursor but I want it to like, disappear if someone uses a touch screen device. Is it possible to do this with only CSS or plain JAVASCRIPT?
JavaScript
x
69
69
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
<title>Document</title>
8
<style>
9
*,
10
*::after,
11
*::before {
12
margin: 0;
13
padding: 0;
14
box-sizing: border-box;
15
}
16
17
body {
18
display: flex;
19
align-items: center;
20
justify-content: center;
21
height: 100vh;
22
overflow: hidden;
23
background: #111;
24
}
25
26
#box {
27
position: fixed;
28
z-index: 824809238;
29
border-radius: 50%;
30
width: 50px;
31
height: 50px;
32
border: 3px solid dodgerblue;
33
top: var(--y);
34
left: var(--x);
35
transform: translate(-50%, -50%);
36
filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
37
animation: animate 2s linear infinite;
38
}
39
40
@keyframes animate {
41
0% {
42
filter: hue-rotate(0deg);
43
}
44
45
100% {
46
filter: hue-rotate(360deg);
47
}
48
}
49
</style>
50
</head>
51
<body>
52
<div id="box"></div>
53
<script>
54
let box = document.getElementById("box");
55
56
window.addEventListener("mousemove", (e) => {
57
box.style.top = `${e.clientY}px`;
58
box.style.left = `${e.clientX}px`;
59
box.style.opacity = "1";
60
});
61
62
window.addEventListener("mouseout", () => {
63
box.style.transition = "opacity 0.5s ease";
64
box.style.opacity = "0";
65
});
66
</script>
67
</body>
68
</html>
69
This is my code but I have no idea how to make it disappear with touch screen devices as I said.
Any Ideas?
Advertisement
Answer
Use touchstart/touchend events:
JavaScript
1
7
1
window.addEventListener("touchstart", () => {
2
box.style.display = 'none';
3
})
4
window.addEventListener("touchend", () => {
5
box.style.display = 'block';
6
})
7