Be a Badass
You can find a simplified version of the code below and by following the Source Code Link and here, the Final Version.
While at first sight these may seem like the same property applied to different elements, they take different arguments. Unlike box shadow, text shadow does not take a value for
spread, which would make the shadow larger. In this case having the ability to increase the spread value gives the circle in the demo a more realistic look.
Who says that the good ol' math days were useless? Albeit, not very complex, I had a chance to use the Pythagorean theorem in order to calculate the distance from the center of the target to the cursor.
- The text is sized using the viewport width (
vw) measurement. Read more about it.
- Font used is Zalamander by Just Another Foundry.
- Touch support. It currently detects tap position on mobile devices but maybe it could detect the orientation? That'd be cool.