Parallax Section Addon Tutorial

Intro

Premium Parallax Section 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.

Parallax Section Addon’s Updated Video Tutorial 2019

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.

Elementor’s Section Structure

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 the Parallax on Android devices.
  • Enable Parallax on iOS: You can enable or disable the Parallax ion iOS devices.
Premium Parallax Controls
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”.
Parallax Auto Moving Background Controls
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 https://www.youtube.com/watch?v=hkMNjxLoZ2w

Multi-Layer Parallax Controls
  • 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”.
Mouse Track Control in Multi-Layer Parallax Type
  • Scroll Parallax: Enable or disable the Scroll 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.
Scroll Parallax Available Controls
Multi-Layer Parallax Responsive Options:

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

  • Desktop
  • Tablet
  • Mobile
Elementor’s Multi-Layer Parallax Responsive Options