Create Dynamic Character & Background Animation With Spritely

NO FLASH. NO PROBLEM. Its Pure HTML & JQuery. jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites.

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.
  • You should be able to make fully accessible web pages in pure html and javascript without any problem

HERE ARE SOME SPRITELY EARLY ADOPTERS:

BROWSER SUPPORT

  • Internet Explorer 6 +
  • Firefox
  • Safari
  • Chrome
  • Opera

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.

Blogger who is Passionate about blogging to share world of design and freebies to viewers, designers, photographgers, graphic and web designers.

Related posts

Top