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:5
extraImgs : 2
opacity
The opacity value for the background-image divisions
opacity : 0.7
bgfixed
Movement of first layer; by default it's not moving
bgfixed : 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
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)