Pure CSS3 Parallax Effect

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