-
Notifications
You must be signed in to change notification settings - Fork 12
/
CssSpotlight.html
86 lines (72 loc) · 2.04 KB
/
CssSpotlight.html
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:root {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Helvetica Neue", "sans-serif";
}
main {
margin: 3em;
}
#glasspane.spot-shade {
background-color: rgba(115,115,170,0.7);
transition: .7s;
}
#glasspane {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
mix-blend-mode: multiply;
pointer-events: none;
user-input: none;
/* default: no shading */
background-color: transparent;
transition: background-color linear .5s;
}
#spotlight {
position: fixed;
top: 50%;
left: 50%;
width: 20vh;
height: 20vh;
background-color: white;
border-radius: 50%;
box-shadow: 0 0 1em white;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<main>
<div id="glasspane" >
<div id="spotlight"></div>
</div>
<div>
<h1>Spotlight Test Page</h1>
<p>Use Alt-Mousemove to show spotlight.</p>
<p style="background: lightblue">some long text some long text some long text some long text some long text
some long text some long text some long text some long text some long text
some long text some long text some long text some long text some long text
</p>
</div>
</main>
<script>
document.onmousemove = evt => {
if( ! evt.altKey) {
glasspane.classList.remove('spot-shade');
return ;
}
glasspane.classList.add('spot-shade');
spotlight.style['left'] = evt.clientX + 'px';
spotlight.style['top'] = evt.clientY + 'px';
}
</script>
</body>
</html>