How to Create Multi-Layered Changeable Images Using Parallax Section Add-on and Elementor Magic Scroll?

Before we start, visit this documentation article if you want to learn more about Premium Parallax Section Addon. And, if you wonder, what is the Elementor Magic Scroll? Well, this documentation article will give you the information you need to know so you can start using it.

And now, in this tutorial, we are going to explore how you can create multi-layered changeable images, exactly the same as the microphone example placed within the Magic Scroll page hero scene using only two Elementor tools, Premium Parallax and Elementor Magic Scroll Global Addon. Basically, we want to add some image layers above each other and change their opacity from 1 to 0 on scroll. So, let’s jump in!

Get a Multi-Layered Changeable Effect Using Magic Scroll Elementor Global Add-on.

01. Get The Images Prepared

In our example, we prepared the microphone images in Photoshop. The steps underneath are describing the process we followed to get the images ready.

• Image Dimension: From Photoshop, create a new file with a specific width and height, it depends on the image(s) you are going to use. In our example, the microphone image dimension took 380 px width by 920 px height.
• Photoshop Layers: In the same file, we placed the microphone image, then duplicated the image three more times, so, the total number of layers – microphone image – became four.
• Adjustments/Colors: We played with the colors in each layer/image separately and we applied that to the first three layers but the fourth layer/image was all about adding the red color inside the mute button. So, now we have four different images with the exact same width and height.
• Export Images: Make sure to export your images for the web by navigating to File > Export > Save for Web within Adobe Photoshop. Saving your images as JPEG or PNG depends on your design but eventually, you’ll have to use an extra online tool to compress the exported images for better website performance. We usually use Compress JPEG and Compress PNG. Furthermore, if you want to get a lighter image size, you can compress your JPEG and PNG to WEBP using this online tool.

02. Using Parallax Section Add-on to Add the Images as Multi-Layers

In this stage, your images are supposed to be ready. The following steps will guide you on how you can use Premium Parallax addon to add your images as multi-layers.

• Go to your Elementor website, then open the Elementor editor.
• From the Elementor’s “Layout” tab, scroll down until you see Parallax. Then, go and enable it.
• Select “Multi-Layer Parallax” as a parallax type, then press on “Add Item”.
• Open the repeater item that appeared to you, then keep the “Image” selected as a repeater item type.
• Upload your first image and adjust its “Horizontal” and “Vertical Alignment”. If you want to set a specific alignment rather than Left, Center, and Right or Top, Center, and Bottom, then you can select “Custom” to set a custom position for them both.
• Adjust the image size using the “Size” option, and add a Z-Index value to it if needed.
• Give it a unique CSS ID because this will be needed once we jump to the next phase which is animating it using the Magic Scroll Global Add-on.
• Repeat the above steps as per the number of images you already have or you want to add to your Elementor web page. NOTE* It’s important not to forget to set a unique CSS ID for each layer.

03. Animating the Multi-Layered Parallax Images Using Magic Scroll Global Add-on

Since the Parallax is an Elementor section addon and not a widget that could be managed from the Elementor’s “Advanced” tab, then we will need to enable the Magic Scroll using the column settings.

Here, we will need to mention that, the Magic Scroll is working with Elementor Widgets and Columns except for the Elementor Sections and Inner-Sections.

Click on the column settings – you can use any column within your Elementor main section – and navigate to the “Advanced” tab. Scroll down until you see Premium Magic Scroll then go and enable it. After that, start by clicking on “Add Item”. Once you do that, follow the steps listed below so you can get the exact same effect located on the Magic Scroll’s hero scene.

A. Repeater Item Settings

1. Under the [Select Animation] option choose “Opacity” as an animation type.
2. Select “Custom CSS Selector” which is placed under the [Apply Animation On] option.
3. You’ll notice a [CSS Selector] field appeared to you. Here, you will add the CSS ID you already gave to the multi-layer images used within the Parallax Section Add-on. NOTE* You should add the hash sign [#] before the CSS ID.
4. Opacity: Set the opacity level to “0” because we want each layer’s transparency to go from 0% to 100% on scroll.

B. Magic Scroll Settings

• How This Animation Should Work?: We used “Lock Page Scroll Until Animation Ends” because we wanted the multi-layered images’ effect appears before the upcoming Magic Scroll effect or before moving to the next scene. The “How This Animation Should Work?” option has 3 more scrolling mechanisms, make sure to visit this article if you want to learn more about them.
• Animation Order: This option totally depends on your design needs. In our example, we made it “2” because we wanted it to be the second Magic Scroll animation visible in this scene.
• Decrease Animation Speed By: From here, you can set how fast or slow the animation will behave/work. In our example, we kept the default value at “1”.

Congratulations!

Now, you are supposed to have the exact same effect made by “YOU” on your Elementor website. Honestly, we believe that you will reach much better animation effects than the one we provided and we’re really thrilled to see it. Don’t hesitate to share your work on our Facebook group and make us get INSPIRED!