59 lines
1.1 KiB
HTML
59 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Mouse Shadow</title>
|
|
<link rel="icon" href="https://fav.farm/🔥" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hero">
|
|
<h1 contenteditable>🔥WOAH!</h1>
|
|
</div>
|
|
|
|
<style>
|
|
html {
|
|
color: black;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: black;
|
|
}
|
|
|
|
h1 {
|
|
text-shadow: 10px 10px 0 rgba(0,0,0,1);
|
|
font-size: 100px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const hero = document.querySelector('.hero');
|
|
const text = hero.querySelector('h1');
|
|
const walk = 50;
|
|
|
|
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 1px rgba(0, 0, 0, 0.5)`;
|
|
}
|
|
|
|
hero.addEventListener('mousemove', shadow);
|
|
</script>
|
|
</body>
|
|
</html>
|