//- h1 💩
h1 ♥
View Compiled
*
margin: 0
border: 0
box-sizing: border-box
html,
body
height: 100%
width: 100%
text-align: center
font-family: 'Aclonica', sans-serif
letter-spacing: 3px
display: flex
justify-content: center
align-items: center
h1
font-size: 200px
color: transparent
user-select: none
text-shadow: 0 0 0 rgba(255, 0, 0, 0.2)
View Compiled
const $ = document.querySelector.bind(document);
const MAX = 50;
function shadow(e) {
const { offsetWidth: width, offsetHeight: height } = $('body');
let { offsetX: x, offsetY: y} = e;
if (this !== e.target) {
x = x + e.target.offsetLeft;
y = y + e.target.offsetTop;
}
const xNow = Math.round((x / width * MAX) - (MAX / 2));
const yNow = Math.round((y / height * MAX) - (MAX / 2));
if ((xNow === 0) && (yNow === 0)) {
$('h1').style.textShadow = `
${xNow}px ${yNow}px 0 rgba(255, 0, 0, 0.2)`;
return;
}
$('h1').style.textShadow = `
${xNow}px ${yNow}px 0 rgba(0, 255, 0, 0.2),
${xNow * -1}px ${yNow * -1}px 0 rgba(255, 255, 0, 0.2)
`;
}
$('body').addEventListener('mousemove', shadow);
View Compiled
This Pen doesn't use any external JavaScript resources.