cube-creator
v2.0.2
Published
Makes cube from any div element with parallax
Downloads
16
Maintainers
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
I will improve this package to arrive more control of params and increase the level of optimization. Please, wait for a little.