## How it works

A normal image is replaced with layers of semi-transparent divisions of the same image. Every layer moves according to the configuration, creating a subtle motion effect.

Hover over the grid images to see how the effect works:

- Default options:

      "extraImgs" : 2,
      "opacity" : 0.7,
      "bgfixed" : true,
      "movement": {
      	"perspective" : 1000,
      	"translateX" : -10,
      	"translateY" : -10,
      	"translateZ" : 20,
      	"rotateX" : 2,
      	"rotateY" : 2,
      	"rotateZ" : 2
      }

- Options:

      "extraImgs" : 4,
      "opacity" : 0.5,
      "bgfixed" : true,
      "movement": {
      	"perspective" : 500,
      	"translateX" : -15,
      	"translateY" : -15,
      	"translateZ" : 20,
      	"rotateX" : 15,
      	"rotateY" : 15
      }

- Options:

      "extraImgs" : 2,
      "opacity" : 0.7,
      "bgfixed" : false,
      "movement": {
      	"perspective" : 1000,
      	"translateX" : 30,
      	"translateY" : 30,
      	"translateZ" : -50,
      	"rotateX" : 0,
      	"rotateY" : 0,
      	"rotateZ" : 10,
      }

- Demo extraImgsScaleGrade. Options:

      "extraImgs" : 2,
      "extraImgsScaleGrade": -0.05,
      "opacity" : 0.7,
      "bgfixed" : false,
      "movement": {
      	"perspective" : 1000,
      	"translateX" : 30,
      	"translateY" : 30,
      	"translateZ" : -50,
      	"rotateX" : 0,
      	"rotateY" : 0,
      	"rotateZ" : 10,
      }

- Demo resetOnLeave. Options:

      "extraImgs" : 2,
      "opacity" : 0.7,
      "bgfixed" : false,
      "resetOnLeave" : false,
      "movement": {
      	"perspective" : 1000,
      	"translateX" : 30,
      	"translateY" : 30,
      	"translateZ" : -50,
      	"rotateX" : 0,
      	"rotateY" : 0,
      	"rotateZ" : 10,
      }

- Demo element.mouseMoveWatcher. Options:

      "extraImgs" : 2,
      "opacity" : 0.7,
      "bgfixed" : false,
      "movement": {
      	"perspective" : 1000,
      	"translateX" : 30,
      	"translateY" : 30,
      	"translateZ" : -50,
      	"rotateX" : 0,
      	"rotateY" : 0,
      	"rotateZ" : 10,
      },
      "element" : {
      	"mouseMoveWatcher" : "#demo-mouseMoveWatcher",
      }

- Demo without create ext images. Options:

      "extraImgs" : false,
      "bgfixed" : false,
      "movement": {
      	"perspective" : 1000,
      	"translateX" : 30,
      	"translateY" : 30,
      	"translateZ" : -50,
      	"rotateX" : 0,
      	"rotateY" : 0,
      	"rotateZ" : 10,
      }

- Demo customImgsOpacity. Options:

      "extraImgs" : 2,
      "opacity" : 0.7,
      "bgfixed" : false,
      "customImgsOpacity" : [0.2, 0.5, 0.03],
      "movement": {
      	"perspective" : 1000,
      	"translateX" : 30,
      	"translateY" : 30,
      	"translateZ" : -50,
      	"rotateX" : 0,
      	"rotateY" : 0,
      	"rotateZ" : 10,
      }

## Options

A normal image is replaced with layers of semi-transparent divisions of the same image. Each layer gets moved in 3D, creating a subtle illusion of perspective.

extraImgs

  Number of extra background-image divisions; min:1, max:64

  `extraImgs : 2`

extraImgsScaleGrade

  Float number for set scale gradient. This option create effect like tunnel or add more perspective

  `extraImgsScaleGrade : 0`

opacity

  The opacity value for the background-image divisions

  `opacity : 0.7`

customImgsOpacity

  The customImgsOpacity make possible set custom opacity for each layer as array of opacity values.

  If length of customImgsOpacity less then layers created then script will use option "opacity"

  `customImgsOpacity : false`

bgfixed

  Movement of first layer; by default it's not moving

  `bgfixed : true`

resetOnLeave

  If true when mouse leave detect area style of images will be reset to zero state

  `resetOnLeave : true`

movement

  The movemement configuration for each background-image division

  `movement : { ... }`

  perspective

    The perspective value for the 3D transforms

    `perspective : 1000`

  translateX

    The relative movement on the x-axis. A positive value will move the background-image divisions in the same direction like the mouse up to the amount defined (in pixel). A negative value reverses the direction, i.e. moves the division into the opposite direction of the mouse.

    `translateX : -10`

  translateY

    The relative movement on the y-axis.

    `translateY : -10`

  translateZ

    The relative movement on the z-axis. This specific translation is done when the mouse moves vertically. A perspective value needs to be set.

    `translateZ : 20`

  rotateX

    The relative rotation on the y-axis. A perspective value needs to be set.

    `rotateX : 2`

  rotateY

    The relative rotation on the y-axis. A perspective value needs to be set.

    `rotateY : 2`

  rotateZ

    The relative rotation on the Z-axis. A perspective value needs to be set.

    `rotateZ : 0`

element

  Element config make possible set detect area from css selectors

  `element : { ... }`

  mouseMoveWatcher

    The mouseMoveWatcher set css selector with element what catch mouse move events.

    As example, you can set 'body' for detect mouse move on whole page

    `mouseMoveWatcher : null|string`

  viewWatcher

    The viewWatcher is css selector for calculate element relative offsets of extra images.

    As example, this may be one block of your page with height about 100vh

    `viewWatcher : null|string`

Add the class "tilt-effect" to the respective image. The image container should have an explicit width and height.

To initialize either set the options in "data-tilt-options" or initialize with JavaScript: `new TiltFx(element, options)`

## Examples

## Inspired by

http://danielspatzek.com/

http://jviewz.com/#/dna

http://nclud.com/

## Related demos:

### Photography Website Concept

### Prism Effect Slider