-
Notifications
You must be signed in to change notification settings - Fork 5
/
mouseEffect.jade
39 lines (29 loc) · 1.04 KB
/
mouseEffect.jade
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
extends base
block vars
- var title = 'CSS Mouse Move Effect'
block styles
link(rel="stylesheet" type="text/css" href="styles/mouseEffect.css")
block body
.hero
h1(contenteditable) 🔥woah!
script(type="text/javascript").
const $hero = document.querySelector('.hero')
const $text = $hero.querySelector('h1')
const walk = 250
function shadow(e) {
const { offsetWidth: width, offsetHeight: height } = $hero
let { offsetX: x, offsetY: y } = e
if (this !== e.target) {
x = x + e.target.offsetLeft
y = y + e.target.offsetTop
}
const xWalk = Math.round((x / width * walk) - (walk / 2))
const yWalk = Math.round((y / height * walk) - (walk / 2))
$text.style.textShadow = `
${xWalk}px ${yWalk}px 0 rgba(255, 0, 255, 0.7),
${xWalk * -1}px ${yWalk}px 0 rgba(0, 255, 255, 0.7),
${yWalk}px ${xWalk * -1}px 0 rgba(0, 255, 0, 0.7),
${yWalk * -1}px ${xWalk * -1}px 0 rgba(0, 0, 255, 0.7)
`
}
$hero.addEventListener('mousemove', shadow)