Working with parallax through CSS3 and Jquery

Question

I am working on a one page website where each section's background-image parallax scrolls over the other.

Here is my HTML:

<section class="container" id="home"></section>
<section class="container" id="about"></section>
<section class="container" id="music"></section>
<section class="container" id="news"></section>
<section class="container" id="videos"></section>
<section class="container" id="connect"></section>
<section class="container" id="contact"></section>

Here is my CSS:

body{
  margin: 0px;
  padding: 0px;
}

.container{
  width: 1920px;
  min-height: 1080px;
  background: 100% 100% no-repeat fixed;
  margin: 0 auto;
  background-color: transparent;
}


#home{background: url(../images/landingPage.png);}
#about{background: url(../images/about.png);}
#music{background: url(../images/music.png);}
#news{background-image: url(../images/news.png);}
#videos{background-image: url(../images/videos.png);}
#connect{background-image: url(../images/connect.png);}
#contact{background-image: url(../images/contact.png);}

In the following JSFiddle , the top three sections scroll down, while the bottom four sections scroll up over each other.

I guess that I need to add some script to the equation as well. Could someone please show me with the jsFiddle that I have posted. Thanks.

Answer 1

You need little bit of javascript for this. Just make every element(page) but first one absolutely postioned, not fixed, and at start top:100% to avoid seeing any but first one, on document load do this:

In order of elements add every consecutive element top position that is all heights of elements before stacked, when elements top edge reaches top of 100% make element before it relative positioned...

Option two when all the pages are positioned right out of the screen(under bottom edge), use on scroll to make each page scroll, one by one, when one's bottom edge reaches bottom edge of the screen, start moving another...