Fixed Background Scroll Effect

Question

short question: How do I achieve this scrolling effect with css? ->

http://focuslabllc.com/

I already tried this:

#one {
    background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-    maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#two {
    background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

Thanks! :)

Solution 1

Its called a "curtain reveal" but in this instance its in reverse. http://www.thecssninja.com/css/reveal-effect

Essentially the first "slide" is located "below" all the other content and set to position: fixed and say z-index: 1 and all the others are set to position: relative and z-index: 10

http://jsfiddle.net/3n1gm4/8gDDy/

so in code it would be

HTML

<div class="slide1">CONTENT</div>
<div class="slide2">CONTENT</div>

CSS

.slide1 { 
    position: fixed;
    z-index: 1;  /* sets it below the other slides in the layer stack */
    height: 100%
}
.slide2 {
    position: relative;
    z-index: 10;  /* sets it above .slide1  */
    margin-top: 100%; /* this pushes it below .slide1 in the scroll */
    height: 100% /* full length slides */
}

* This was quickly done and probably not 100% accurate but intended to give you a basic idea about whats going on there.

Solution 2

Ok, you can do this with just CSS.

HTML

<div class="main">Sample text/div>
<div class="reveal-me-holder"></div>
<div class="reveal-me">Revealed</div>

CSS

body {
    margin:0;
}
.main {
    height: 700px; 
    position:relative;
    z-index: 2; 
    background: red;
} 
.reveal-me {
    height: 500px;
    position:fixed; 
    bottom:0; 
    width:100%;
    background: black;
    color:white;
 } 
.reveal-me-holder {
    height: 500px;
} 

This jsfiddle shows the results.

Comments

[tastybytes]

there is no parallax going on with that page. its just a fixed position div set below the others. look at their code