Parallax Hover

Parallax Hover is a nestable element with a “Wrapper” element containing all the element that will receive the parallax hover effect. At this “Wrapper” element you can place all the content you want. As each “Wrapper” element has its own customizable parameters inside the Parallax Hover, you can generate all the “Wrapper” elements you want at Parallax Hover with their own behaviours.

Offset: Parallax Hover offset when activated (on hover), it is basically a translateZ.
Always active: if true, Parallax Hover effect will be always active even if the hover state isn’t active on the element.
Duration: determines transition duration when activated, leave and during rotate.

Rotate: defines whether to rotate container on pointer move.
Rotate touch: defines whether to rotate container on touch move. Rotate must be enabled.
Max X Rotation & Max Y Rotation: max rotation along the X-axis / Y-axis (in deg).
Invert X Rotation & Invert X Rotation: inverts rotation along the X-axis / Y-axis (in deg).

X Stretch / Y Strech / Z Stretch: move (translate) Parallax Hover along the X-axis / Y-axis / Z-axis on this value (in percentage). E.g. “50” value will move container +-50% of it’s width.

Shadow: if true, a shadow will be generated behind Parallax Hover.
Shadow offset: shadow element’s translateZ value.
Shadow scale: shadow scale factor.
Highlight: if enabled, a highlight will be included at the parallax hover effect.

This settings can be found at “Wrapper” element available inside Parallax Hover element.
Offset: offset/translate applied only to the content of this wrapper when hover state is active at Parallax Hover.
Opacity: “from opacity;to opacity”. e∫.g. “0;1” means element’s opacity will change from 0 (on initial state) and up to 1 (on max rotate angles).

-Tamu