animate-sprite is a lightweight (5.5KB minified) library that allows you to animate a series of frames that appear to be 3D. It supports full animation sequence playback, mouse and touch image rotation, autoplay, loop, and reverse, and displays an API to programmatically control animations.
3d product viewer, 360 degree product viewer, free 360 product viewer, 360 degree product view html5, 360 product viewer open source, 360 product viewer software plugin
Features:
- Interact with drag, mouse movement, and touch events.
- Infinite loop and autoplay.
- Responsive, mobile-friendly design.
How to make use of it:
1. Install and download the package using NPM.
# NPM $ npm @its2easy/animate-sprite --save
2. Import the animated object into your document.
<script src="/path/to/build/animate-sprite.min.js"></script>
3. Create a placeholder for the image viewer.
<div id="sprite-example" class="sprite sprite-example"></div>
4. Enter the product image as the background for the image viewer.
.sprite{ background-image: url("product.jpg"); }
5. Initialize the image viewer and pass the required parameters.
var element = document.getElementById('sprite-example'); var sprite = animateSprite.init(element, { width: 600, /* required */ height: 450, /* required */ frames: 36, /* required */ } );
6. Run the image viewer when the page is loaded.
sprite.play();
7. 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 } );
8. Or pass the options through the HTML data attributes:
<div id="sprite-example" class="sprite sprite-example" data-width="600" data-heigth="450" data-frames="36"> </div>
9. Available API methods to programmatically control the image viewer.
// 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();
10. Event handlers.
element.addEventListener('sprite:first-frame', function () { // first frame }) element.addEventListener('sprite:last-frame', function () { // last frame })
3D Interactive Product Viewer Based On Sprite Sheet, Animate Sprite Plugin/Github, 3d interactive product demo, 360 product view examples
See Demo And Download
Official Website(its2easy): Click Here
This superior jQuery/javascript plugin is developed by its2easy. For extra Advanced Usages, please go to the official website.
Be First to Comment