Back to contents

JetElements Parallax effect. How to apply parallax effect on mouse move

From this tutorial, you will learn how to apply Parallax effect on mouse move using one of JetElements useful settings.

Parallax effect on mouse move

Let’s find out how to deal with Section Parallax effect within JetElements plugin. 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

Creating Parallax Effect for the Section

Step 1 — First of all, open the page with Elementor editor. After that, choose the section to which you want to apply the parallax effect on mouse move.

Step 2 — Secondly, proceed to the Style > Background block to upload the background image and customize its position, size, attachment and repeat.

Background settings for Parallax Effect

Step 3 — Next, move on to the Layout > Jet Parallax and click the Add Item button to add a new layer. It should be in .png format.

Jet Parallax settings for the section

Step 4 — In the Parallax Type option select the Mouse Move one to stick the layer to the mouse movements. Moreover, you can add more layers and set a different Parallax Speed (%) for them to make the animation faster or slower.

Parallax items settings for the section

That’s all! If you wish you can apply any other additional changes, which were not mentioned above.