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="//code.jquery.com/jquery-1.11.1.min.js"></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.

$('.demo').spify({

  // 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-size="434,300"
    data-url="spify-sprite.png"
    data-duration="100"
    data-count="4"
    data-durations="1:3000, 4:500"
    data-vector="vertical">
</div>

<sctipr>
  $('.demo').spify();
</script>

---

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