jQuery Plugin For Simple Image Sprite Animation - Gif Scratcher

File Size: 14.3 KB
Views Total: 2713
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Simple Image Sprite Animation - Gif Scratcher

Gif Scratcher is a jQuery plugin which allows you to animate image sprites with custom interactions. Helps you manually play & stop an animated GIF like a 'GIF Player'.

You might also like:

How to use it:

1. Use ImageMagick to extract every single frame from an animated GIF as individual JPEGs and then create a sprite sheet.

2. Include the required gifscratcher.css in the head section of the web page.

<link rel="stylesheet" href="stylesheets/gifscratcher.css">

3. Insert the first frame of your image sprite sheet into a container.

<div id="demo">
  <img src="images/00.jpg">
</div>

4. Call the plugin on the container and set the path of your image sprite sheet.

$("#demo").gifscratcher({
  sprite : '1.jpg',
  frames : 26
});

5. All the default settings.

// image sprite sheet path
sprite      : '',

// the number of columns the sprite sheet has
frames      : 0,

// 'hover', 'drag', 'auto', 
// 'autoWithHover', 'autoWithDrag'
interaction : 'hover',

// Add custom cursor
cursor      : true,

// define animation speed
speed       : 5

Change log:

2016-01-29

  • Remove old code.
  • Minor autoplay fixes.

2015-09-16

  • Check if image is visible.

2014-11-26

  • Fix touch events.

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