Multi Layered Parallax

Multi-Layered Parallax is available in the Section’s “Style” tab.

 

 

At first, click on “Add Item” to upload the image. You can add multiple images. Adjust the depth, image position, and size. You can also input your own custom CSS if you want.

 

Relative Input:

Makes mouse input relative to the position of the scene element.

Clip Relative Input:

Clips mouse input to the bounds of the scene. This means the movement stops as soon as the edge of the scene element is reached by the cursor. No effect when “Hover Only” option is activated.

Hover Only:

Parallax will only be in effect while the cursor is over the scene element, otherwise, all layers move back to their initial position. Works best in combination with “Relative Input”.

Calibrate X and Calibrate Y:

Caches the initial X/Y axis value on initialization and calculates motion relative to this. No effect when the cursor (means “hover only” is disabled) is used.

Invert X and Invert Y:

Inverts the movement of the layers relative to the input. Setting both of these values to false will cause the layers to move with the device motion or cursor.

Limit X and Limit Y:

Limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom to the movement.

Scale X and Scale Y:

Multiplies the input motion by this value, increasing or decreasing the movement speed and range.

Friction X and Friction Y:

Amount of friction applied to the layers. At 1 the layers will instantly go to their new positions, everything below 1 adds some easing. The default value of 0.1 adds some sensible easing. Try 0.15 or 0.075 for some difference.

Origin X and Origin Y:

X and Y origin of the mouse input. The default of 0.5 refers to the center of the screen or element, 0 is the left (X-axis) or top (Y-axis) border, 1 the right or bottom.

Have any recommendation to improve the documentation?

Submit your Feedback

Submit your feedback