Last Updated:

Simple scrolling effect with parallax on CSS3

Parallax is one of the most beautiful features in modern site building, simplicity, and unusual effect makes the visitor admire such a zest. We pay a lot of attention to this topic, and it is increasingly gaining momentum in readability. In this tutorial we will look at one of the fairly simple effects, which is scrolling with the parallax effect implemented using CSS3 and JS. We'll have four images that will smoothly replace each other as we scroll through the page. This effect has already been implemented on many sites.

 

Many different free templates you can find on the website of our partners, there are also premium templates with round-the-clock technical support and help in setting up:

 

In this tutorial, I'll show you how we can build a simple parallax site with a few lines of JavaScript code and CSS. So let's get started.

Step 1. HTML

The first step is to add background images and classes to them, in addition, we add the data-speed parameters that we need to create this effect:

 

 

In addition, you need to connect the jQuery library to the site header, please note that if you already have this library connected, then a version conflict may arise, and the entire site will become unusable.

Simple scrolling effect with parallax on CSS3

Step 2. CSS

Now we need to define the parameters for each image, except for this image will be fully adaptive, while maintaining the effect:

 

 

As a result, we get an almost functional effect, we only have to add a little magic for the full work of parallax.

Step 3. JS

The basic idea is to move slides at different speeds while the page scrolls up or down. This can only be achieved with a few lines of code. The following is JavaScript code that uses the HTML5 data type selector to ensure that all slides and sets of background positions of each page scroll up or down.

 

 

I hope this effect will be useful to you and you will create a wonderful site that will please the visitor with beautiful graphics and smoothness of movement.