Parallax escrolling effect

Question

I want to do exactly the same as this page. http://www.googleventures.com/

It is like a parallax effect when you slide down the lower part of the page comes up. How can I do that with an image as a header? Pure jquery? Is there an onSlide function?

Parallax? That just looks like regular scrolling except that one part is fixed in its position and has a lower z-index. — Wiseguy
– Wiseguy, Commented May 16, 2012 at 19:20

Josh Allen · Accepted Answer · 2012-05-16 19:33:05Z

4

I did an alternate option. You don't even need z-index, since the newer elements are automatically higher in z-index.

HTML

<div class="fixed">
  <img src="http://placekitten.com/800/300" />
  This is some text that will be static as well
</div>
<div class="scroll">
  Lorem ipsum dolor sit amet
</div>

CSS

.fixed{
    position: fixed;
}
.scroll{
    background: #eee;
    height: 700px;
    position: relative;
    top: 350px;        
}

Working example: http://jsfiddle.net/3vxBA/

answered May 16, 2012 at 19:33

Josh Allen

99712 silver badges30 bronze badges

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

Comments

Wiseguy · Accepted Answer · 2012-05-16 19:32:13Z

3

That just looks like the header has a fixed position and a lower z-index, so when you scroll regularly, the page continues upward but the header stays in the same position behind the main contents.

Sample HTML:

<body>

<div id="header">
some image here
</div>

<div id="pagecontent">
everything else
</div>

</body>

Sample CSS:

body {
    padding-top: 100px; /* #header height */
}

#header {
    position: fixed;
    top: 0px;
    z-index: -1;
    background-color: #ccccff;
    height: 100px;
    width: 100%;
}

#pagecontent {
    background-color: #ccffcc;
    height: 1000px;
    width: 100%;
}

Here's this as a working example: http://jsfiddle.net/Nv7Ku/

answered May 16, 2012 at 19:32

Wiseguy

20.9k9 gold badges68 silver badges83 bronze badges

2 Comments

a.litis Over a year ago

this works perfect! How does the z-index work? what if I put an smaller number, let say -2O?

Wiseguy Over a year ago

@a.litis In this example, making it more negative won't do anything differently unless you have other items that also have custom z-indexes. Z-index sets visual order of elements, lowest to highest. Default is 0; a z-index smaller than 0 will be rendered "behind" or "underneath" the normal layer; a higher z-index will be rendered "in front" or "on top". You can give a bunch of elements different z-indexes to have them appear in a certain visual order. These Mozilla docs offer a better explanation and some good examples.

Collectives™ on Stack Overflow

Parallax escrolling effect

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related