Author: | its2easy |
---|---|
Views Total: | 109 views |
Official Page: | Go to website |
Last Update: | July 16, 2020 |
License: | MIT |
Preview:

Description:
animate-sprite is a 3D interactive image viewer that allows your customers to view important detail and aspect of your product image.
Based on Sprite Sheet image that consists of frames (single image) from all angles of your product.
More Features:
- Interactive with drag, mouse hover, and touch events.
- Autoplay and infinite loop.
- Responsive design and mobile friendly.
How to use it:
1. Install & download the package with NPM.
# NPM $ npm @its2easy/animate-sprite --save
2. Import the animate-sprite into your document.
<script src="/path/to/build/animate-sprite.min.js"></script>
3. Create a sequence of image spritesheets for your product.
4. Create a placeholder for the image viewer.
<div id="sprite-example" class="sprite sprite-example"></div>
5. Insert your product image as the background to the image viewer.
.sprite{ background-image: url("product.jpg"); }
6. Initialize the image viewer and pass the required parameters:
- width: width of the image viewer
- height: height of the image viewer
- frames: total number of frames (single image).
var element = document.getElementById('sprite-example'); var sprite = animateSprite.init(element, { width: 600, /* required */ height: 450, /* required */ frames: 36, /* required */ } );
7. Play the image viewer on page load.
sprite.play();
8. Default options.
var sprite = animateSprite.init(element, { width: 100, height: 100, frames: 24, cols: false, loop: false, frameTime: false, // time between frames duration: false, fps: 24, reverse: false, // reverse direction autoplay: false, draggable: false } );
9. Or pass the options via HTML data
attributes:
<div id="sprite-example" class="sprite sprite-example" data-width="600" data-heigth="450" data-frames="36"> </div>
10. Available API methods to control the image viewer programmatically.
// init sprite.init(element, options); // play sprite.play(); // pause sprite.pause(); // stop sprite.stop(); // toggle sprite.toggle(); // go to the next frame sprite.next(); // back to the previous frame sprite.prev(); // reset sprite.reset(); // destroy sprite.destroy(); // set a frame without animation sprite.setFrame(frameIndex); // reverse the animation sprite.setReverse(true/false); // update an option sprite.setOption(option, value); // get the current frame index sprite.getCurrentFrame(); // check if is animating sprite.isAnimating();
11. Event handlers.
element.addEventListener('sprite:first-frame', function () { // first frame }) element.addEventListener('sprite:last-frame', function () { // last frame })
Changelog:
v1.1.2 (0/16/2020)
- fix animation stop after resize