Last Updated:

Modern parallax effect in jQuery

The parallax effect on jQuery and how to create it. Today we would like to talk about the process of creating a modern parallax effect for the site using CSS3 and jQuery. We will try to simplify the creation process as much as possible for the ease of its implementation in the structure of the site. Parallax will support display on mobile devices, in addition, it will be adaptive, for its creation we have prepared a selection of images. Captions have also been added to the images in the top layer to display additional information, they will also be accompanied by this effect.

If you need to create a landing page with a ready-made effect, using a template that is easy to customize and adapt to your needs, then pay attention to the offer in our online store.

Parallax effect on jQuery. Begin!

Step 1. HTML

To get started, import the necessary jQuery JavaScript library into the page where you plan to display this effect.



Next, add a background image to the container using the data-image-src attribute:



You can add multiple containers using this attribute, the only one for the new block is to assign a new attribute, for example id="parallax-1" and the next one will be id="parallax-2".

Step 2. CSS

We'll only have a few CSS rules for parallax images:



Not everyone likes parallax to work on mobile devices, you can disable it with the following rule:



Step 3. JS

Now the most important thing remains, we need to revive the ratio of images to blocks, first we need to fill in the images from data attributes:



Now you need to check whether the item is in the viewport:



All we have to do is pin the scroll event to the window. Calculate the scroll ratio of each element and change the position of the image with this ratio:




As a result, we got such a rather attractive parallax effect for a site that is easy to install and fill with its content. You're also going to have an interesting article about the background on the parallax. What do you say?