cube-creator

    2.0.2 • Public • Published

    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.

    Install

    npm i cube-creator

    DownloadsWeekly Downloads

    54

    Version

    2.0.2

    License

    ISC

    Unpacked Size

    439 kB

    Total Files

    17

    Last publish

    Collaborators

    • alexeykrotkov