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.

Hi, i am little bit confused about your question, can you setup the example on jsfiddle — Vikas Ghodke
– Vikas Ghodke, Commented Aug 24, 2013 at 3:37

Rastko · Accepted Answer · 2013-08-24 07:08:33Z

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

answered Aug 24, 2013 at 7:08

Rastko

4532 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rastko Over a year ago

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

Collectives™ on Stack Overflow

Working with parallax through CSS3 and Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related