How to provide smooth scrolling effect like in given website?

+7 Abhishek Kumar · July 30, 2016

I saw a nice scrolling effect on this website and would like to know how to implement.
I have never seen it before and I do not know what it is even called.

Please help me out.. 

Thanks in advance..:) 

Post a Reply


Oldest  Newest  Rating
+1 Anthony Gonzalez · August 4, 2016
I believe the scrolling effect your trying to achieve is called 'parallax': a process in which the background of a website moves slower than the content of the foreground. In simple terms, it can be done through plain JavaScript (although it can be fairly tedious and time consuming) by creating multiple background layers stacked on top of each other using varying z-index properties for each one, and assigning each background in the stack a specific scroll speed.

For example

Let's examine the first part of the web page you provided: the part containing the gray cloud background with pink clouds on top of it.

There are three different backgrounds here stacked on top of each other:

    1) A gray cloud background serving as the "base" (the background furthest in the stack with the lowest z-index)

    2) One row of pink clouds

    3) A second row of pink clouds

Although there are many pink clouds on top of the gray background, we see that some clouds scroll up faster than others. This is because these fast-scrolling clouds are a separate background with a faster scroll speed than the others, which results in the parallax effect you see.

If I had to write down steps to achieving this effect, they would be:

1) Create multiple transparent backgrounds with non-transparent objects on them (the pink clouds are actually just non-transparent shapes on top of a transparent rectangular image, which is why the clouds are visible, but the rectangle holding them is not).

2) Place your actual website content in a separate div and place it at the highest z-index!!

3) Use the z-index CSS property to specify in which order the backgrounds are layered. See more about z-index here:

4) Use JavaScript to dynamically change the rate at which each background image scrolls up (this is the tricky part). 

The 4th step is tricky as scroll speed is set by browsers and cannot (usually) be altered. My advice would be to set a static height for your entire webpage, and altering marginBottom through JavaScript for each background as the user scrolls.

For Example, as the user scrolls down, marginBottom will increase by 10px on the first background, by 15px on the second background, and by 20px for the third background. This simulate backgrounds scrolling up at different speeds.
0 Ahsan Khan · August 18, 2016
Hi Bro do you tell me plzz Whats is the name of your scroll down efffect this is very cool..
+1 Dhruv Singhal · January 22, 2017
@Ahsan Khan
It's Parallax
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.