Hero image

A subtle tilt effect for your images Image Tilt Effect

This effect currently only works on hover. Please switch to a desktop browser in order to see the effect.

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:

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