HTML / CSS - Fixed backgrounds while scrolling

Question

Any idea or explanation of how they made the backgrounds of this site? http://upcircuit.org/ Basically, a fixed background is the trick. But there are several backgrounds, and I'm trying to solve the tricks of this site :)) I tried to check the source of the page, but I have no idea how they did it.

Answer 1

They have panels, the size of which depends on the size of the window. Then they set the background image for each panel and set it background-attachment: fixedso that it remains positioned relative to the window, and not the div in which it is located.

: http://jsfiddle.net/Zc822/

body, html {
    width: 100%;  // Sets the html and body width and height 
    height: 100%; // to the width and height of the window.
    margin: 0;
}
.panel{
    width: 100%;  // Sets each panel to the width and height
    height: 100%; // of the body (which is set to the window)

    background-repeat: no-repeat;
    background-attachment: fixed;  //Sets background fixed in window
    background-size: cover;
}

background-image .

, , .

Answer 2

?

background-attachment: fixed;

, .

Answer 3

, 3D-, . , , , . javascript, :

, :

http://matthew.wagerfield.com/parallax/?utm_medium=App.net&utm_source=PourOver

, : https://www.google.com/nexus/5/

Answer 4

This is the parallax effect. Here are some guides: http://www.1stwebdesigner.com/css/create-scrolling-parallax-website/

http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

Here are some examples of inspiration:

http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html