Light (Spify < 2 Kb) and sample jQuery plugin for sprite animations
Load jQuery and include spify plugin
<script src="jquery.js"></script>
<script src="jquery.spify.min.js"></script><div class="animation"></div>or with data-* options
<div class="animation"
data-size="100,100"
data-count="4"
data-duration="500"
data-url="sprite.png">
</div>With JS params
$(".animation").spify({
size: [100, 100],
count: 4,
duration: 500,
url: 'sprite.png'
});If is set data-* options initialize animation very easy
$(".animation").spify(); /* Required */
url: string // Url to sprite image
size: array // Size frame
// js: [width, height]
// html: "width, height"
count: int // Count frames
/* Extanded */
duration: int // Duration for each frame
// Default: 300
durations: object // Duration for individual frames
// Example
// js: {1: 300, 3: 2000}
// html: "1: 300, 3: 2000"
vector: string // Position frames in sprite (vertical or horizontal)
// Default: vertical _______________________________________
| | | | |
| 1 | 2 | 3 | ... | // horizontal
|_________|_________|_________|_________|
_________
| |
| 1 |
|_________|
| |
| 2 |
|_________| // vertical
| |
| 3 |
|_________|
| |
| ... |
|_________|The MIT License (MIT)
Copyright (c) 2014 Sergey Belozyorcev