Parallax Section Addon Tutorial

Intro

Premium Parallax Section/Column Add-on can be used to create amazing and attractive pages with freehand design experience.
This widget will help you create smooth scrolling animations and effects with different parallax types like Scroll, Opacity, Scale, Auto Moving Background, and Multi-Layer Parallax.

Click here to check Premium Parallax Section Addon demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

UPDATE: You can now add Parallax Section to any Elementor Column by navigating to Column settings -> Layout tab -> Enable Parallax.

Key Features

• Section
• Parallax

1. Section

Before the Parallax can be added, you need to select an existing section or create a new Elementor section.

2. Parallax

• Enable Parallax: Enable or disable the Parallax.
• Type: Select one from the following parallax types and effects:
  • Scroll
  • Scroll + Opacity
  • Opacity
  • Scale
  • Scale + Opacity
  • Auto Moving Background
  • Multi-Layer Parallax

Parallax Types:

All of the other Parallax types such as Scroll, Scroll + Opacity, Opacity, Scale, and Scale + Opacity have the following options except for Auto Moving Background and Multi-Layer Parallax.

• Speed: Select the background effects’ speed in milliseconds.
• Enable Parallax on Android: You can enable or disable Parallax on Android devices.
• Enable Parallax on iOS: You can enable or disable Parallax on iOS devices.

Auto Moving Background

To enable the Auto Moving Background, you must first add a background image to the section from the section’s Style tab.
This parallax type has the following additional settings:

• Direction: Select the auto moving background direction. You can choose from:
  • Left to Right.
  • Right to Left.
  • Top to Bottom.
  • Bottom to Top.
• Speed: Set the speed of the background movement. The default is “3”.

Multi-Layer Parallax

Add multiple items and adjust their position, scrolling and mouse effects to different speeds and directions to create the parallax effects.

Select the Add Item button to add a new item to apply the parallax effect on.

Choose Image: Select or upload an image from the WordPress media library. At first, the image will appear too large but you can adjust it easily using the following controls:

• Horizontal and Vertical Position: Adjust the image position in %.
• Size: Adjust the image size in %, in reference to the browser window size. Default is 100.

NEW: Now you can position and resize parallax layers from the preview area. Select, hold and drag the image to move it and select the image borer to resize it. Check the video tutorial from here.

• Z -index: Adjusting the Z-index can help you position items above or below other elements. A higher Z-index means that the image is higher up in the layer order.
  If you added an image but can’t see it in the preview, try adjusting the Z-index.
  Similarly, if you are combining the parallax item with widgets and texts, you may need to adjust the Z-index of that widget in case the image is covering other elements.

• Mouse Track: Enable or disable mouse move interaction. Example: This means that if the user moves the mouse to the left, the image will move to the left, if the mouse moves upwards, the image will move upwards and so on.
  • Rate: Choose the movement rate for the layer background. The default is “-10”.

• Scroll Parallax: Enable or disable the Scroll Parallax.
• Vertical Parallax:
  • Direction: Set the scroll direction to up or down.
  • Speed: Add a speed value to adjust the scroll moving speed.
  • Viewport: This control will help you to adjust the starting and ending position of each layer/image.
• Horizontal Parallax:
  • Direction: Set the scroll direction to left or right.
  • Speed: Add a speed value to adjust the scroll moving speed.
  • Viewport: This control will help you to adjust the starting and ending position of each layer/image.

Multi-Layer Parallax Responsive Options:

Feel free to enable or hide the Parallax effects on different screen sizes like:

• Desktop
• Tablet
• Mobile