Creating An Effect Where A Background Image Scrolls At A Different Rate To The Page Content

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 do

Solution 1:

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

• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
• http://abduzeedo.com/super-easy-parallax-effect-jquery
• http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

Solution 2:

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

Solution 3:

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.