EV Matt 404

EV Matt 404

by AaronLayton

HTML

<script src="http://spritely.net/scripts/jquery.spritely-0.6.1.js"></script>
<link href='//fonts.googleapis.com/css?family=Bangers&amp;v2' rel='stylesheet' type='text/css' />
<div id="stage" class="stage">
    <div id="space" class="stage"></div>
    <div id="astronaut" class="stage" style="top: 188.4624602692525px; left: 174.51729456861474px; background-position: 0px 0%; ">
        <div id="text_1">Houston,<br>we have a<br>problem!</div>
        <div id="text_2">Error 404!</div>
        <div id="text_3">Eventure Matt<br>is looking for the page<br>dont panic!</div>
        <div id="text_4">Check the URL or go <a href="/">home</a></div>
    </div>
</div>

CSS

.stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#space {
    background:url(http://www.eventureinternet.com/wp-content/uploads/2012/02/space.jpg) repeat-x 0 0 fixed;
    -webkit-background-size:cover;
    -mox-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
  -webkit-transform: translateZ(0);
}

#astronaut {
    width:730px;
    height:650px;
    background:url(http://www.eventureinternet.com/wp-content/uploads/2012/02/ev-matt-404.png) no-repeat;
    position:relative;
    margin-left:50px;
    top:20%;
  -webkit-transform: translateZ(0);
}
#text_1 {
    font-family: 'Bangers', cursive;
    font-size: 30px;
    color: #393939;
    line-height: 28px;
    position: absolute;
    top: 102px;
    left: 32px;
}
#text_2 {
    font-family: 'Bangers', cursive;
    font-size: 90px;
    color: #2D2D2D;
    width: 380px;
    padding-right: 10px;
    position: absolute;
    top: 10px;
    left: 95px;
}
#text_3 {
    font-family: 'Bangers', cursive;
    font-size: 33px;
    color: #393939;
    line-height: 32px;
    text-align: right;
    width: 305px;
    padding-right: 15px;
    position: absolute;
    top: 73px;
    left: 332px;
}
#text_4 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 18px;
    color: #4C4C4C;
    text-transform: uppercase;
    font-style: italic;
    position: absolute;
    top: 180px;
    left: 392px;
    margin: 10px 0 0 28px;
}

JavaScript

$(document).ready(function() {
    $('#astronaut')
        .sprite({fps: 30, no_of_frames: 1})
        .spRandom({top: 130, bottom: 200, left: 30, right: 200});
    $('#space').pan({fps: 40, speed: 3, dir: 'right', depth: 50});
});