Content

Relative input: if enabled makes mouse input relative to the position of the scene element. No effect when the gyroscope is used.

Clip relative input: if enabled the movement stops as soon as the edge of the scene element is reached by the cursor. No effect when the gyroscope is used.

Hover only: if enabled Parallax will only be active while the cursor is over the scene element, otherwise all layers move back to their initial position.

Input element: allows the use of a different element for cursor input. The configuration property expects an HTMLElement while the data value attribute expects a query selector string. It will only work in combination with relativeInput, setting hoverOnly might make sense too. No effect when the gyroscope is used.

Calibrate X: if enabled caches the initial X/Y axis value on initialization and calculates motion related to it. No effect when the cursor is used.

Calibrate Y: if enabled caches the initial X/Y axis value on initialization and calculates motion related to it. No effect when the cursor is used.

Invert X: if enabled 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's motion or cursor.

Invert Y: if enabled 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's motion or cursor.

Limit X: limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom of movement.

Limit Y: limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom of movement.

Scalar X: multiplies the input motion by this value, increasing or decreasing the movement speed and range.

Scalar Y: multiplies the input motion by this value, increasing or decreasing the movement speed and range.

Friction X: the 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.

Friction Y: the 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: X 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.
No effect when the gyroscope is used.

Origin Y: 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.
No effect when the gyroscope is used.

Pointer events: if enable interactions with the scene and layer elements. When set to false, the CSS attribute pointer-events: none will be applied for performance reasons. Setting this to true alone will not be enough to fully interact with all layers since they will be overlapping. You have to either set position: absolute on all layer child elements or keep pointerEvents at false and set pointer-events: all for the interactable elements only.

Default depth factor: this value (0 ÷ 1) determines the depth between each image;

Items: here you can add your images, as default a shape is showed.