Visitar URL original
mouse move shadow complete · wesbos/JavaScript30@f535fad · GitHub
Skip to content

Commit f535fad

Browse files
lindsmalindsma
committed
mouse move shadow complete
1 parent 06aeee6 commit f535fad

3 files changed

Lines changed: 44 additions & 21 deletions

File tree

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

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,15 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Mouse Shadow</title>
6+
<link rel='stylesheet' href='styles/main.css'>
67
</head>
78
<body>
89

910
<div class="hero">
1011
<h1 contenteditable>🔥WOAH!</h1>
1112
</div>
1213

13-
<style>
14-
html {
15-
color:black;
16-
font-family: sans-serif;
17-
}
18-
19-
.hero {
20-
min-height: 100vh;
21-
display:flex;
22-
justify-content: center;
23-
align-items: center;
24-
color:black;
25-
}
26-
27-
h1 {
28-
text-shadow: 10px 10px 0 rgba(0,0,0,1);
29-
font-size: 100px;
30-
}
31-
</style>
32-
33-
<script>
14+
<script src='js/app.js'>
3415
</script>
3516
</body>
3617
</html>

‎16 - Mouse Move Shadow/js/app.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const hero = document.querySelector('.hero');
2+
const text = hero.querySelector('h1');
3+
const walk = 100; // 100px
4+
5+
6+
7+
function shadow(e) {
8+
const width = hero.offsetWidth;
9+
const height = hero.offsetHeight;
10+
// or with destructuring
11+
// const {offsetWidth = width, offsetHeight = height} = hero;
12+
let x = e.offsetX;
13+
let y = e.offsetY;
14+
if(this !== e.target) {
15+
x = x + e.target.offsetLeft;
16+
y = y + e.target.offsetTop;
17+
}
18+
const xWalk = Math.round((x / width * walk) - (walk / 2));
19+
const yWalk = Math.round((y / height * walk) - (walk / 2));
20+
21+
text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;
22+
23+
}
24+
25+
hero.addEventListener('mousemove', shadow);

‎16 - Mouse Move Shadow/styles/main.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
html {
2+
color:black;
3+
font-family: sans-serif;
4+
}
5+
6+
.hero {
7+
min-height: 100vh;
8+
display:flex;
9+
justify-content: center;
10+
align-items: center;
11+
color:black;
12+
}
13+
14+
h1 {
15+
text-shadow: 10px 10px 0 rgba(0,0,0,1);
16+
font-size: 100px;
17+
}

0 commit comments

Comments
 (0)