0

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.

justLearning
  • 187
  • 2
  • 9
  • 19

1 Answers1

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...

Rastko
  • 477
  • 2
  • 7
  • I made changes to your jsFiddle, you need to apply this on the local exampole since it wont work on jsfiddel due the complexity of example. It might as well be the bug in my code but this is not full solution it is the way it could be done for infinite number of stached divs you want. What you need next is reverse function or any other wayyou want scrolling other way to work and you are good to go – Rastko Aug 25 '13 at 12:05