How to provide smooth scrolling effect like in given website?
Post a Reply
|Oldest Newest Rating|
· August 4, 2016
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: http://www.w3schools.com/cssref/pr_pos_z-index.asp
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.
· August 18, 2016
Hi Bro do you tell me plzz Whats is the name of your scroll down efffect this is very cool..
· January 22, 2017
· April 23, 2017
Thanks for your info