Configurable Sprite Based Animations - ImageSpritePlay
File Size: | 18.7 KB |
---|---|
Views Total: | 1044 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ImageSpritePlay is a simple yet powerful jQuery sprite animator for creating fancy configurable animations from image sprites you provide.
Features:
- Infinite loop.
- Autoplay.
- Custom range.
- Custom delay.
- Fade transition.
- Callback functions.
How to use it:
1. Place the JavaScript jquery.ImageSpritePlay.js
after jQuery library (slim build).
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="jquery.ImageSpritePlay.js"></script>
2. Create a container in which you want to place the sprite animation.
<div id="example" class="sprite-play"></div>
3. Call the function on the container, specify the path to the sprite image, and set the amount of frames.
$("#example").imageSpritePlay({ image: 'sprite.png', frame_count: 4, autoplay: true, loop: true });
4. Full plugin options to customize the sprite animation.
$("#example").imageSpritePlay({ image : null, frame_count : 0, custom_range : null, next_range : null, loop : false, autoplay : false, delay : 0, // Delay on first play inverted : false, // false: forward, true: backward velocity : 500, fadeTransition : false, randomized : false, inlineStyle : true });
5. Callback functions.
$("#example").imageSpritePlay({ onComplete : null, onFrame : null, beforeStart : null, afterStop : null, onLoop : null });
6. API methods.
var myAnimator = $("#example").imageSpritePlay(); myAnimator.first() myAnimator.previous() myAnimator.play() myAnimator.delay_play(p_arg) myAnimator.pause() myAnimator.resume() myAnimator.stop() myAnimator.justStop() myAnimator.next() myAnimator.goto(p_arg) myAnimator.restart() myAnimator.refresh() myAnimator.last() myAnimator.velocity(p_arg) myAnimator.loop(p_arg) myAnimator.invert() myAnimator.delay(p_arg) myAnimator.attach(p1, p2) myAnimator.setRange(p1, p2) myAnimator.nextRange(p1, p2, p3)
This awesome jQuery plugin is developed by marceloxp. For more Advanced Usages, please check the demo page or visit the official website.