Skip to content

Commit 4298621

Browse files
tiago-m-diastiago-m-dias
committed
feat: mouse shadow
Challenge wesbos#16 Mouse movement with shadow
1 parent 1966f87 commit 4298621

1 file changed

Lines changed: 55 additions & 33 deletions

File tree

‎16 - Mouse Move Shadow/index-START.html‎

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,62 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Mouse Shadow</title>
5+
<meta charset="UTF-8">
6+
<title>Mouse Shadow</title>
67
</head>
8+
79
<body>
810

9-
<div class="hero">
10-
<h1 contenteditable>🔥WOAH!</h1>
11-
</div>
12-
13-
<style>
14-
html {
15-
color: black;
16-
font-family: sans-serif;
17-
}
18-
19-
body {
20-
margin: 0;
21-
}
22-
23-
.hero {
24-
min-height: 100vh;
25-
display: flex;
26-
justify-content: center;
27-
align-items: center;
28-
color: black;
29-
}
30-
31-
h1 {
32-
text-shadow: 10px 10px 0 rgba(0,0,0,1);
33-
font-size: 100px;
34-
}
35-
</style>
36-
37-
<script>
38-
</script>
11+
<div class="hero">
12+
<h1 contenteditable>🔥WOAH!</h1>
13+
</div>
14+
15+
<style>
16+
html {
17+
color: black;
18+
font-family: sans-serif;
19+
}
20+
21+
body {
22+
margin: 0;
23+
}
24+
25+
.hero {
26+
min-height: 100vh;
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
color: black;
31+
}
32+
33+
h1 {
34+
text-shadow: 10px 10px 0 rgba(0, 0, 0, 1);
35+
font-size: 100px;
36+
}
37+
</style>
38+
39+
<script>
40+
const hero = document.querySelector('.hero');
41+
const text = hero.querySelector('h1');
42+
43+
function shadow(e) {
44+
// const width = hero.offsetWidth;
45+
// const height = hero.offsetHeight;
46+
const {
47+
offsetWidth: width,
48+
offsetHeight: height
49+
} = hero;
50+
let {
51+
offsetX: x,
52+
offsetY: y
53+
} = e;
54+
55+
console.log(x, y);
56+
}
57+
58+
hero.addEventListener('mousemove', shadow);
59+
</script>
3960
</body>
40-
</html>
61+
62+
</html>

0 commit comments

Comments
 (0)