Back to contents

JetElements Parallax effect. How to use parallax transform 3D effect

Discover the process of creating an awesome transform 3D parallax effect, one of many things that can be done using JetElements plugin for Elementor.

There are several ways how you can get the parallax to transform 3D effect work, and in both of the cases, it will look exclusive.

Before we start working, make sure JetElements plugin is installed and activated on the site.

Then, make sure, that you’ve activated the Parallax effect in the JetElements Settings. To perform it you should proceed to the Elementor > JetElements Settings option and here go to the last tab which is called Available Extensions where you need to toggle on the Section Parallax Extension option.

Available Extensions

Keep reading to learn about 3 easy methods of adding parallax transform 3D effects to your pages.

Method #1

Step 1 — First, let’s create a new section. To do it, click the Add New Section button.

Add new section with Magic button

Step 2 — Navigate to the Layout > Jet Parallax block and click the Add Item button to add a new layer of parallax.

Jet Parallax block

Step 3 — Upload an image in the Image block from your hard drive and set the preferable parallax speed (%) using the Parallax Speed control.

Image block

Step 4 — In the Parallax Type dropdown select the Mouse Move option and pick the Contain option from the Background Size dropdown. Then, proceed to the Animation Property dropdown, where you have to choose the Transform 3D option.

Layout settings

Step 5 – Now randomly move your mouse cursor over the section and watch the result. Do you like it? We have 2 more parallax tricks for you.

parallax tricks

Method #2

Step 1 — Repeat step 1 from the first method.

Step 2 — In the Parallax Type dropdown select the Scroll option, pick the Auto alternative from the Background Size dropdown and choose the Transform 3D option from the Animation Property dropdown.

Layout settings

What about this one? Does this effect seem more attractive to you? Wait for one more and then make your final decision!

Method #3

Step 1 — Repeat step 1 from the first method.

Step 2 — In the Parallax Type dropdown select the Mouse Move option, pick the Auto option from the Background Size dropdown and choose the Transform 3D option in the Animation Property dropdown.

Layout settings

That’s it! We hope you will find the best effect for your website!