Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6d9f847

Browse files
day 17
1 parent 3bfad43 commit 6d9f847

File tree

5 files changed

+94
-1
lines changed

5 files changed

+94
-1
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
3232
| [Day 13](./each%20day%20build%20day!/Day%13/) | [Custom video player](./each%20day%20build%20day!/Day%2013/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2013/README.md/) |
3333
| [Day 14](./each%20day%20build%20day!/Day%14/) | [Key sequence detection](./each%20day%20build%20day!/Day%2014/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2014/README.md/) |
3434
| [Day 15](./each%20day%20build%20day!/Day%15/) | [Scrolling IN effects](./each%20day%20build%20day!/Day%2015/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2015/README.md/) |
35-
| [Day 16](./each%20day%20build%20day!/Day%16/) | [Reference vs copy](./each%20day%20build%20day!/Day%2016/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2016/README.md/) |
35+
| [Day 16](./each%20day%20build%20day!/Day%16/) | [Reference vs copy](./each%20day%20build%20day!/Day%2016/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2016/README.md/) |
36+
| [Day 17](./each%20day%20build%20day!/Day%17/) | [Mouseover Shadow](./each%20day%20build%20day!/Day%2017/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2017/README.md/) |
42.6 KB
Loading[フレーム]

‎each day build day!/Day 17/Readme.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Mouse Shadow Effect
2+
3+
cool css effect using js. The idea is to capture the mouse movement within the div and update it to fall between certain range, and pass those values to `textshadow` css property to see the magic!
4+
5+
6+
# Challenges
7+
- elements offsetWidth, offsetHeight
8+
- mouse offsetX, offsetY
9+
- textshadow
10+
11+
# demo
12+
![](1index.html.png)
13+
![](index.html.png)
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Mouse Shadow 🐁 </title>
7+
</head>
8+
9+
<body>
10+
11+
<div class="hero">
12+
<h1 contenteditable>🔥Mouse Shadow effect</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 h1 = hero.querySelector('h1');
42+
const range = 300;
43+
44+
45+
46+
47+
function shadow(e) {
48+
//our play area
49+
const { offsetWidth: width, offsetHeight: height } = hero;
50+
//get the exact mouse pointer co-orderinates
51+
let { offsetX: x, offsetY: y } = e;
52+
53+
//update the values of get absolute values;
54+
//this === hero element
55+
if (this !== e.target) {
56+
x = x + e.target.offsetLeft; // to fix resetting of co-ordinates (0,0) at top,left of h1
57+
y = y + e.target.offsetTop;
58+
}
59+
60+
//then adjust the offset by defining the range(max, min) 30,-30
61+
const xRange = Math.round((x / width * range) - (range / 2));
62+
const yRange = Math.round((y / height * range) - (range / 2));
63+
64+
//finally update the textshadow property
65+
h1.style.textShadow = `
66+
${xRange}px ${yRange}px 0 rgba(255,0,255,0.7),
67+
${xRange * -1}px ${yRange}px 0 rgba(0,255,255,0.7),
68+
${yRange}px ${xRange * -1}px 0 rgba(0,255,12,0.7),
69+
${yRange * -1}px ${xRange}px 0 rgba(0,0,255,0.7)
70+
71+
`
72+
73+
}
74+
75+
hero.addEventListener('mousemove', shadow)
76+
</script>
77+
</body>
78+
79+
</html>
121 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /