There are some times when we need to add some punch to our websites. Simple images or graphics are ok for static pages though can be rather dull to view. Something that “moves” is often more pleasing to the eye. The new HTML5 specifications adds further support for 2D and 3D canvases. There we can draw a variety of things that move and go bump in the night.
One javascript tool that i’m looking into can be found here. It introduces us to a simple set of javascript functions that automate the drawing process by using HTML markup and a javascript library to do the deed.
A List Apart wrote a nice post in 2004, giving us some insights into this process. Read their intro here and a more recent update from David Shea in 2008 can be found here.
CSS Tricks offers another view of the use of sprites. I like this approach as it can be used to animate menu bar action by having a sprite hover over the current menu entry.
Did an old sprite tool myself to do just that, but can’t find the code now (typical). If i can locate it, i’ll throw it up on github for you to see. Think it was based on this demo from Ganesh who did a great job rebuilding the functionality as a JQuery add-on. Look at this :
Notice the darker overlay on top of the currently active menu item. This opens up a world of possibilities for menu animations. A horse galloping over the current menu item ? Or a whale swimming under it ? Ideas on a postcard, please.
Life in the I.T. Fast Lane 