CSS Only Parallax

Requires modern browser

by moob

HTML

<div class="parallax">
    <div class="parallax-layer-header" id="header">
        header
    </div>
    <div class="parallax-layer-background">
        <div>This is the background</div>
    </div>
    <div class="parallax-layer-foreground">
        <div>This is the foreground</div>
        <div>This is the foreground</div>
        <div>This is the foreground</div>
        <div>This is the foreground</div>
        <div>This is the foreground</div><div>This is the foreground</div><div>This is the foreground</div>
    </div>
</div>

CSS

body, html {
    margin:0;
    padding:0;
    height: 100%;
}

/* the parallax wrapper
enable perspective */
  .parallax {    
    height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-perspective: 1px;
    perspective: 1px;
  }

  *[class*="parallax-layer"] {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border:2px solid red;
  }


    

   .parallax-layer-background {
    /* offset the z-axis to make it further away 
    but then scale it up so the size isnt reduced */
    -webkit-transform:  translateZ(-1px) scale(2);
    transform: translateZ(-1px) scale(2);
    background:rgba(0,0,0,0.4);
  }

  .parallax .parallax-layer-foreground {
    /* offset y-axis to make off-screen */
    
    -webkit-transform: translateY(0%) translateZ(0);
    transform: translateY(0%) translateZ(0);
    background:rgba(0,0,200,0.4);
    min-height:100%;
    top:100%;
    bottom:inherit;
  }


#header {
    background:rgba(0,100,200,0.4);
    height:40px;
    margin:0;
    z-index:999999;
}


/* padded just for show */
*[class*="parallax-layer"] div {
    text-align:center;
    margin-top:100px;
}