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)