Simpllax

DEMO

by vvv vvvv

HTML

<script src="http://didierdevos.be/empire/simpllax/simpllax-1.0.min.js"></script>
<section class="slide-1">
    <article>
         <h2>I am the first title.</h2>

        <p>Can't you see?</p>
    </article>
</section>
<section class="slide-2">
    <article>
         <h2>I am the second title.</h2>

        <p>Yes, we can see.</p>
    </article>
</section>
<section class="slide-3">
    <article>
         <h2>I am a title who used to live on an island.</h2>

        <p>So you live oversea?</p>
    </article>
</section>
<section class="slide-4">
    <article>
         <h2>I am Black.</h2>

        <p>Arial?</p>
    </article>
</section>

CSS

body {
    margin: 0;
    color: #333;
}
h2 {
    margin: 0 auto;
    font-size: 72px;
    font-family: Arial Black;
}
article {
    position: absolute;
    top: 250px;
    margin: 0 20%;
    width: 60%;
    font-family: Arial, sans-serif;
    font-size: 48px;
}
h2, section {
    text-align: center;
}
section {
    position: relative;
    margin: 0 auto;
    border-top: 7px solid;
    width: 100%;
    max-width: 1600px;
    height: 1000px;
    min-height: 1000px;
    background: no-repeat fixed center 0 transparent;
}
section:nth-child(n+2) {
    box-shadow: 0 0 100px rgba(0, 0, 0, 1);
}
.slide-1 { /*desert road*/
    border: 0 none;
    background-image: url(http://i.imgur.com/nFq1Bxt.jpg);
}
.slide-2 { /*waterfall*/
    border-color: brown;
    background-image: url(http://i.imgur.com/SUsPzxJ.jpg);
    color: brown;
}
.slide-3 { /*island coast*/
    border-color: #66cc99;
    background-image: url(http://i.imgur.com/WWtT8nD.jpg);
    color: #66cc99;
}
.slide-4 { /*typo*/
    border-color: #ffff66;
    background-image: url(http://i.imgur.com/zUU41nj.jpg);
    color: #ffff66;
}

JavaScript

$(".slide-1,.slide-2,.slide-3,.slide-4").simpllax({
    "speed": -0.1
});