Easy Image Sprite Animation On Hover Using jQuery - spriteControl

File Size: 108 KB
Views Total: 1930
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Image Sprite Animation On Hover Using jQuery - spriteControl

spriteControl is a jQuery & jQuery UI widget used to animate an image sprite frame by frame on mouse hover. Easy to use, cross browser and highly customizable.

How to use it:

1. Prepare a sprite sheet that consists of multiple frames in one image. 

2. Add the image sprite as a background image to your container.

.sprite {
  display: block;
  background: url(sprite.jpg) 0 0 no-repeat;
  width: 218px;
  height: 200px;

3. Include jQuery, jQuery UI and the jQuery spriteControl widget at the bottom of the web page.

<script src="/path/to/jquery-1.11.3.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/spriteControl.js"></script>

4. Enable the sprite animation on hover.

  // Options here

5. Here is a list of available options with default values to customize the sprite animation.


  // the number of frames
  allsteps: 10,

  // Set size in pixels for each frame
  step: 110,

  // infinite loop
  loop: false,

  // reverse animation
  reverse: true,

  // horizontal or vertical image
  horizontalImg: true

This awesome jQuery plugin is developed by nmcobalt. For more Advanced Usages, please check the demo page or visit the official website.