Package Exports

cube-creator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cube-creator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

cube-creator

Look Demo

Installation

Using npm:

$ npm i --save cube-creator

Using

To create cube without effects pass key DOM element and parentElement to constructor. "element" must have width and height.

const cube3D = new CubeMaker(element, parentElement);

To create cube or upgrade existing cube with parallax effect use

const cube3D = new CubeMaker(element, parentElement);
const parallax3D = new WithParallax3D(cube3D);

Configure your cube

CubeMaker object has many props to control. It's default props config onto library.

optionsDefault = {
  isAutoClone: true,  // clone source element to all sides
  isAutoColors: true, // color all sided (besides front side)
  isAutoTransformOrigin: true, // transform-origin is centered by default
  rotate: [0, 0, 0], // default 3D rotate
  sides: { // pass your HTML elements here
    front: null,
    right: null,
    left: null,
    top: null,
    back: null,
    bottom: null
  },
  dimensions: {
    depthZ: 200 // set depth of cube in px
    // width and height will set by width and height of passed source element
    // now widht and height don't adaptive
  },
  classNames: { // class names of inner wrapper that cube generate
    cubeWrapper: 'cube-wrapper',
    cubeContainer: 'cube-container',
    cubeSide: 'cube-side'
  }
};

WithParallax3D class decorator has following props

optionsDefault = {
  rotate: [0, 0, 0], // default rotate and reset rotate values
  resetTransformRotateWithoutMovingTime: 1500,
  resetTransformRotateOnMouseOutTime: 50,
  disableTransformAnimationMouseOutTime: 300,
  throttleMouseOverTime: 0 // disabled by default,
  parallaxFactors: { // frequency of the parallax effect
    x: 5,
    y: 5
  }
};

All props from this object are configurable.

CSS using with cube-creator

Just use existing class names of cube and CSS selectors to configure every side

Examples

Look examples and source code on GitHub

Cube is created via module

I will improve this package to arrive more control of params and increase the level of optimization. Please, wait for a little.