Skip to content

JakeAdams91/canvas-spinner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Canvas-Spinner

A simple 3d product viewer made with vanilla JavaScipt and the HTML canvas element.

Installation

$ npm install --save canvas-spinner

Usage

import canvas-spinner into your project,

import CanvasSpinner from 'canvas-spinner'

create a canvas element in your HTML and give it an id.

<canvas id="canvas-spinner"></canvas>

pass canvas-spinner the following params: the canvas element, the images array of urls, and a boolean to determine whether you want a demo 360 degree spin to run on-load (default: False).

let spinner = new CanvasSpinner(imgSrc, canvas, true)

API

CanvasSpinner.currentFrame - reference to current frame in CanvasSpinner CanvasSpinner.totalFrames - returns total number of images stored

CanvasSpinner.update(direction: Number) - passing a value of -1 will spin product clockwise, passing 1 spins product counter-clockwise

CanvasSpinner.setFrame(frame: Number) - passing a number will display image with index matching the number value.

Key contributors:

@JakeAdams91

@juegoman

@JosephCorralesWeb

License The MIT License (MIT)

About

3d product viewer written in vanilla javascript

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published