Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a ‘sprite’ image contains two or more ‘frames’ of animation, whereas a ‘pan’ image contains a continuous image which pans left or right and then repeats. Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won’t look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element.
SPRITELY HAS THE FOLLOWING GREAT ADVANTAGES
- It works well on iPhone/iPod Touch/iPad – check out this page on an iPhone.
- It has been tested successfully on all the major browsers – even Internet Explorer 6
- It’s a great alternative to Flash if your desired platform does not support it.
- It’s light-weight so you can do fill the whole window with movement without draining bandwidth.
- Animated objects can also fly above the text of a web page, or you could animate a background, without affecting other elements on the page.
HERE ARE SOME SPRITELY EARLY ADOPTERS:
- Internet Explorer 6 +
CAN ANYBODY USE SPRITELY?
Yes – you’re free to use spritely without charge as long as you comply with the the license. jQuery.spritely is released under Dual the same license as jQuery.
ONE FINAL WORD OF CAUTION…
Use Spritely sparingly. A little Spritely goes a long way, but over-ambitious use of these techniques may lead to poor performance, especially on mobile devices. A little movement on a large page may be better than a lot of movement on a small one. Please test Spritely carefully for your target audience/platforms before you develop your site as performance may vary from platform to platform.