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: vertical

Design sprite

 _______________________________________
|         |         |         |         |
|    1    |    2    |    3    |   ...   | // horizontal
|_________|_________|_________|_________|

 _________
|         |
|    1    |
|_________|
|         |
|    2    |
|_________|  // vertical
|         |
|    3    |
|_________|
|         |
|   ...   |
|_________|

License

The MIT License (MIT)

Copyright (c) 2014 Sergey Belozyorcev