Creating an effect where a background image scrolls at a different rate to the page content

Question

Could anybody pleae explain me how could I create an effect like https://www.spotify.com/us/ Please click on Find out more on this page.

It looks like a 3D effect. Eg: The image doesn't move as much as the scroll does. If we have two paragraphs on page and 2nd paragraph below 1st paragraph, the 2nd paragraph moves quickly before the 1st paragraph does.

Any guidelines how can I create these effect or if any Jquery plugin, then also it would do.

Thanks!

All I see when I follow that link is a full-screen video behind some text. — ColinE, Mar 18 '13 at 06:16

score 2 · Accepted Answer · answered Mar 18 '13 at 06:21

The effect you have linked to is know as a 'parallax scroll'. There are numerous websites and plugins that describe how to implement this:

Nikhar · Answer 2 · 2013-03-18T06:39:37.547

That's parallax effect ,

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.

check this SITE and PLUGIN

score 0 · Answer 3 · answered Apr 10 '13 at 15:20

I have made a very basic parallax effect on a site of my own.

$(window).scroll(
    function() {
        x = $("html").scrollTop() * -.05;
        $(".bg_img").animate({top: x + "px"}, 0);
});

Feel free to use this and I'm always open to suggestions.

Creating an effect where a background image scrolls at a different rate to the page content

3 Answers3

Linked