Focus: the tutorial 🌔 November 20 2013
Focus was a pretty quick experiment, but once you know how it was done there are tons of directions you can take the code and concept in.
The HTML is pretty cut and dry: A div with span elements containing the individual characters.
The sneakiest bit of this experiment lies in the the CSS. At first I was planning on using webkit-filter: blur, but then I realized by making the text transparent and using the blur radius property of text-shadow I could get the effect I wanted cross browser.
Then I used a for each loop to iterate through all of the spans. In this I retrieve the offset.left and offest.top values and multiply them by half of the width or height to center the final offset values for each span.
Now here’s the best bit. On a mousemove event I first update the mouseX annd mouseY variables. Then I iterate through the focus spans and, based on the saved offset values minus the updated mouse positions, I alter the blur radius of the text shadow.
And that’s it! If you have any questions write to me on my twitter. If you do your own experiments with this code let me know- I’d love to see them. Cheers!