3D Interactive Product Viewer Based On Sprite Sheet – animate-sprite

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