Monday, March 2nd, 2009
What Secret does is to take a string and then locate each individual character from that string on a rendered page. It will then duplicate each found character in place and finally display the original string in a rather fun ‘magical’ manner. It’s really an experiment to see if I could get the location of an individual character since that kind of information isn’t presented by browsers.
You can check out the code to get the fun details in how this all works:
The way Secret works is to firstly discover what HTML elements are currently displayed inside the browser viewport (it is preferable to take characters from the text which can be seen rather from any random point in the document), and read the text from each of the text nodes with in these visible elements. For each character in your message, Secret will scan through the text which has been found and randomly select one for display. If one can’t be found then it would fall back to look outside the hidden areas as well, and finally fail if a suitable character can’t be found.
Once a character has be found, it position in the document must be determined. Browsers don’t provide a convenient method for doing this with text nodes, and specifically individual characters, so what Secret does is to wrap a ‘span’ tag around the target. From there the getBoundingClientRect() method can be used to determine its location.
After that, its a case of calculating where on the screen the character should be displayed, relative to the other characters in the string (line breaks etc. must be considered) and animating the element into position. The animation is provided by the YUI library, which made this animation exceptionally simple to implement (thank you to the YUI team!). The core of Secret is independent of any library so you can use that for any application you which, only the animation requires YUI.
Posted by Dion Almaer at 4:01 am