Search code examples
javascripthtmlcssparallax

Parallax escrolling effect

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?

Solution

  • 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/