Parallax

With this widget you can create awesome images's 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 in effect while the cursor is over the scene element, otherwise all layers move back to their initial position
  4. Input element: allows usage of a different element for cursor input. The configuration property expects an HTMLElement, the data value attribute a query selector string. 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 relative to this. No effect when cursor is used
  6. Calibrate Y: if enabled caches the initial X/Y axis value on initialization and calculates motion relative to this. 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 to the movement
  10. Limit Y: limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom to the 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 the default of 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 a working example

Still need help? Contact Us Contact Us