← View all entries

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

Source Links