Minimal jQuery Plugin To Create Sprite Animations - Spify

File Size: 127 KB
Views Total: 1398
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal jQuery Plugin To Create Sprite Animations - Spify

Spify is a dead simple jQuery plugin used to create sprite animations on elements using CSS Image Sprites.

How to use it:

1. Load the jQuery library and the jQuery spify in the Html page.

<script src="//"></script>
<script src="js/jquery.spify.min.js"></script>

2. Create an empty DIV elements for the sprite animation.

<div class="demo"></div>

3. Call the plugin on the DIV element and set the options for the sprite animation.


  // frame size
  size: [434, 300],

  // time to complete the animation
  duration: 100,

  // the number of frames
  count: 4,

  // duration for individual frames
  durations: {1: 300, 4: 500},

  // Url to sprite image
  url: 'spify-sprite.png'
  // vertical or horizontal
  vector: 'vertical'


4. You can also pass the options via Html5 data-* attributes as follows.

<div class="demo"
    data-durations="1:3000, 4:500"


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