Volet + easing

by vvv vvvv

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="boite">
    <div id="volet">
        <p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p><a href="#">Hey! Let&rsquo;s fly away!</a>

        </p>
    </div>
    <p class="first">Oh</p>
    <p class="second" title="Que diable se passe-t-il ?">What the Hell?</p>
</div>


<!--
Y U NO USE FULL SCREEN?? >>>
http://jsfiddle.net/Didier/HJEwa/embedded/result/
-->

CSS

@import url("http://fonts.googleapis.com/css?family=Droid+Sans|Open+Sans:800|Gentium+Book+Basic:400italic");
body {
    margin: 0 auto;
    width: 550px;
    background: #34393d url("http://didierdevos.be/box/concrete_wall.png") repeat;
    font-family: "Droid Sans", Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    text-shadow: 0 -1px 0 #25272a;
}
a {
    text-decoration: none;
    color: #feb556;
}
a:hover {
    border-bottom: 1px solid #feb556;
}
.info {
    font-weight: bold;
}
#boite {
    position: relative;
    z-index: 1;
    margin: 150px 0;
    border-top: 13px solid rgba(0, 0, 0, 0.7);
    border-bottom: 13px solid rgba(0, 0, 0, 0.7);
    padding: 50px 20px 170px;
    background-color: rgba(0, 0, 0, 0.3);
}
.first {
    font-family: "Gentium Book Basic", Georgia, Times, serif;
    font-size: 55px;
    color: #fea93a;
    font-style: italic;
    text-shadow: 2px -2px 0 #25272a;
}
.first:before {
    content: "\2013" " ";
}
.first:after {
    content: " " "\2013";
}
.second {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 75px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #25272a;
}
.first, .second {
    text-align: center;
}
#volet {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 500px;
    padding: 280px 25px 25px;
}
#volet p {
    margin-top: 25px;
    text-align: center;
}
.replay {
    cursor: pointer;
}

JavaScript

$(document).ready(function () {

    //Volet
    var ready = true;
    var paddingVolet = $("#volet").innerHeight() - $("#volet").height();
    var boiteH = $("#boite").innerHeight() - paddingVolet;

    $("#volet, #volet p").hide();

    function Volet() {
        if (ready) {
            ready = false;
            $("#volet, #volet p").fadeOut("slow");
            $("#boite").css("background-color", "transparent");
            $("#volet").css({
                "height": boiteH,
                    "background-color": "rgba(0,0,0,0.3)"
            });
            $("#volet").delay(1500).slideDown({
                duration: 1000,
                easing: "easeOutBounce",
                complete: function () {
                    $("#volet p").fadeIn("slow");
                    ready = true;
                }
            });
        }
    };

    Volet();

});