Description
Light (Spify < 2 Kb) and sample jQuery plugin for sprite animations
1.Getting Started
Load jQuery and include spify plugin
<script src="jquery.js"></script> <script src="jquery.spify.min.js"></script>2.Set up your HTML
<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>3.Call the plugin
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();Options
/* 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: verticalDesign sprite
_______________________________________ | | | | | | 1 | 2 | 3 | ... | // horizontal |_________|_________|_________|_________| _________ | | | 1 | |_________| | | | 2 | |_________| // vertical | | | 3 | |_________| | | | ... | |_________|License
The MIT License (MIT)
Copyright (c) 2014 Sergey Belozyorcev
