Be a Badass
An experiment with animated css text-shadow through javascript.
Be a Badass uses javascript to change the text shadow based on the position of the cursor on the screen relative to the center of the object. Thus creating a spotlight like effect. It also gave me a chance to play with typography and colors.
You can find a simplified version of the code below and by following the Source Code Link and here, the Final Version.
Notes
CSS3 box-shadow vs. text-shadow
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.
Math
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.
Other Goodies
- 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.