Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery.Spritely: Create Dynamic Character & Background Animation in HTML & JavaScript

DZone's Guide to

jQuery.Spritely: Create Dynamic Character & Background Animation in HTML & JavaScript

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

jQuery. Spritely is a jQuery plugin 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  and dynamic scrolling backgrounds.   You can use it on any HTML web page, and any part of the page can interact with a sprite.

Features

  • It works well on iPhone/iPod Touch/iPad - check out this page on an iPhone. (Please note that there is a problem with the current version of Mobile Safari on the iPad - see the documentation page for more information.)
  • 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

Browser Support

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

Mobile Support

  • Android
  • iPhone
  • iPad
  • iPod Touch

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}