C S S

HTML
<h1>CSS!</h1>
SCSS
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: #000; } $dropShadows: (); @for $i from 1 through 6 { $dropShadows: $dropShadows drop-shadow(calc( var(--x) * #{pi()} * #{$i}) calc( var(--y) * #{pi()} * #{$i}) #{$i*0.3}px hsl(270, 100%, $i*12%)); } h1 { font-family: 'Bungee Outline', "Helvetica Neue", Helvetica, sans-serif; font-size: 25vh; color: white; text-align: center; font-weight: normal; filter: $dropShadows; }
JAVASCRIPT
let title = document.querySelector("h1"); document.addEventListener("mousemove", e => { let x = e.clientX; let y = e.clientY; title.style.setProperty("--x", `${(x - window.innerWidth/2) / 100}px`); title.style.setProperty("--y", `${(y - window.innerHeight/2) / 100}px`); });
Expand for more options Login