Pure CSS3 Parallax Effect

Here is an awesome code snippet for pure css3 parallax effect, with no js involved. Created by the highly talented Martin Ivanov.

HTML

<!doctype html>
<html lang="en-us">
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Parallax by Martin Ivanov (@wemakesitesnet)</title>
        <meta name="description" content="Parallax Effect with Pure CSS3" />
        <meta name="keywords" content="css parallax, html5 parallax scroll, css scroll parallax, parallax html5 page, parallax css code" />
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" />
        <link rel="stylesheet" href="AcidJs.Parallax/styles/Parallax.css" />
    </head>
    <body>
        <section>
            <div>
                <h1>CSS3 Parallax by Martin Ivanov (@wemakesitesnet). No JavaScript. No Hassle.</h1>
                <p>You gonna love this one for it's simple HTML, elegant CSS and 
                    lack of any JavaScript. Scroll the page down to see how it's done.
                And it's responsive too! Download <a href="http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=274">here</a> and play with the code!</p>
            </div>
        </section>
        <section>
            <div>
                <div class="semi-transparent-black">
                    <h2>Slides</h2>
                    <p>Each slide is a <code><section /> element with 
                        display: table. This allows 100% width and height.
                    The rest is as easy as...
                
                
        
        <section>
            <div>
                <h2>Nested <div /> Elements...</h2>
                <p>Set as display table-cell. They also hold the 
                    content of each slide and you can apply any style to them.</p>
            </div>       
        </section>
        <section>
            <div>
                <h2>The Actual Parallax Effect</h2>
                <p>Is achieved by setting a background image as <section />'s 
                    generated content by using the before:: pseudo-element.</p>
                <p>We are using generated content, because in this manner we are able to 
                    apply CSS/SVG filter effects without affecting the content of the slide:</p>
                <div class="semi-transparent-black code-listing">
                </div>
            </div>  
        </section>
        <section>
            <div>
                <h2>And That's It!</h2>
                <p>The rest is up to your imagination and colorful dreams. You can have as many slides and colors as you wish!</p>
                <p>If you like this solution, you can also check my 
                <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
                <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>, 
                <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
                <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
                 follow me on <a href="https://twitter.com/wemakesitesnet" target="_blank">Twitter</a> 
                 or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
            </div>     
        </section>

CSSlockquote>

/*
 * CSS3 Parallax by Martin Ivanov (@wemakesitesnet)
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/
 
/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/
 
*,
*::before,
*::after
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
body, 
html
{
    margin: 0;
    height: 100%;
    padding: 0;
}
 
h1,
h2
{
    font-weight: 300;
}
 
a,
body > section > div
{
    color: #fff;
}
 
body > section:nth-child(2) > div,
body > section:nth-child(4) > div
{
    padding: 0;
}
 
body
{
    cursor: default;
}
 
code
{
    font: normal 1.1em Consolas, "Courier New", Courier, Monospace;
}
 
body > section
{
    position: relative;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    font-family: "Open Sans", Helvetica, Arial, Sans-serif;
    text-shadow: 1px 1px 0 #000;
}
 
body > section::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
 
h1
{
    font-size: 3em;
}
 
body > section > div
{
    display: table-cell;
    width: 100%;
    height: 100%;
    padding: 2em;
    vertical-align: middle;
    text-align: center;
}
 
body > section:nth-child(1)::before
{
    background: #639;
}
 
body > section:nth-child(2)::before
{
    background-image: url("images/green.jpg");
}
 
body > section:nth-child(3)::before
{
    background: #b01e00;
}
 
body > section:nth-child(4)::before
{
    background-image: url("images/abstract.jpg");
}
 
body > section:nth-child(5)::before
{
    background: #006ac1;
}
 
.semi-transparent-black
{
    padding: 1em;
    background: rgba(0, 0, 0, .5);
}
 
.semi-transparent-black.code-listing
{
    margin: auto;
    width: 50%;
    padding: .5em;
    text-align: left;
}

Live in Action

View Demo

Source & more Info