Simpllax

DEMO

by vvv vvvv

HTML

<script src="http://didierdevos.be/empire/simpllax/simpllax-1.0.min.js"></script>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<section class="batiment" data-simpllax-name="one">
     <h2>Parallaxe</h2>

    <p>Aucune idée de ce qu'elle représente, juste un truc pioché sur Google Images. Cette première image défile plus lentement que le scroll, et plus lentement que la seconde image ci-dessous.</p>
</section>
<section class="batiment" data-simpllax-name="two">
     <h2>Encore moi…</h2>

    <p>…mais en plus rapide — mais toujours plus lente que le scroll. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit...

CSS

body {
    font-family: sans-serif;
    background-color: #fdf1e8;
    color: #333;
}
.batiment {
    position: relative;
    height: 500px;
    padding: 15px;
    margin: 0 0 15px;
    width: 100%;
    background: url(http://www.juzaphoto.com/shared_files/uploads/329810.jpg) transparent center 0 repeat fixed;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    -webkit-transition: background-position 0.1s ease; /*only webkit browsers, not FF*/
}
.batiment:nth-child(2) {
    height: 250px;
}

JavaScript

/*$("[data-simpllax-name='one']").simpllax({"speed":-0.2});
$("[data-simpllax-name='two']").simpllax({"speed":-0.5});*/

$(".batiment").simpllax({"speed":-0.2, "offset":150});