The Parallax effect is a modern design feature commonly used to create an engaging homepage or a landing page that stands out. For the Text, Single Media, Heading, Button, Posts, Media Gallery, and Icon Box modules, it's, from Uncode 2.0.4, possible to apply a Parallax animation at 10 different speeds.
To activate Parallax scrolling navigate to the Animation tab, to one of the elements that support it, and choose a Parallax speed as an animation, screenshot .
The 'Parallax in Header' option should be used when the elements you are animating are located as the name suggests in the page's header and are therefore immediately visible. In this way, the script will leave the elements unchanged, and the Parallax will be activated only at the first scroll. In all other cases, the script will move the elements to create the Parallax effect, and they will be in their natural design position when in the center of the viewport.
Don't underestimate the creative options that can come from using Parallax animations combined with the Matrix option of the Single tab of the Posts module. In fact, by applying different animation speeds as a pattern in the Matrix creation, it is possible to create Grids or Carousels in which the elements move in Parallax with various independent speeds.
- The Column is the only element that can combine canonical animations (Opacity, Zoom, etc.) with Parallax animations. For all other modules, Parallax is one of the animation options.
- Note that due to technical limitations it is impossible to insert modules with animations inside a Column with Parallax. For example, please don't use a Heading module with Opacity animation inside a column with Parallax since it is impossible to correctly calculate the position and instantiate the animation at the right moment.
- Note that Parallax does not work with Slides Scroll and Scroll Snap, as these effects are not authentic browser scrolls.