Parallax

Create awesome images' parallax movements trough device orientation or mouse. 

Content

Parallax

  1. Relative input: if enabled makes mouse input relative to the position of the scene element. No effect when gyroscope is used.
  2. 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 gyroscope is used.
  3. 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.
  4. 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 gyroscope is used.
  5. Calibrate X: if enabled caches the initial X/Y axis value on initialization and calculates motion related to it. No effect when cursor is used.
  6. Calibrate Y: if enabled caches the initial X/Y axis value on initialization and calculates motion related to it. No effect when cursor is used.
  7. 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 motion or cursor.
  8. 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 motion or cursor.
  9. Limit X: limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom of movement.
  10. Limit Y: limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom of movement.
  11. Scalar X: multiplies the input motion by this value, increasing or decreasing the movement speed and range.
  12. Scalar Y: multiplies the input motion by this value, increasing or decreasing the movement speed and range.
  13. Friction X: 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.
  14. 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.
  15. 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 gyroscope is used.
  16. 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 gyroscope is used.
  17. 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: allfor the interactable elements only.

Parallax Items

  1. Default depth factor: this value (0 ÷ 1) determines the depth between each image;
  2. Items: here you can add your images, as default a shape is showed.

Demo

Here there is a working example

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us