ClipHoarder Device Page

a simple page with animated sections. Animations build by myself.

by Pete Fecteau

HTML

<div id="wrapper" class="anywhere">
        <div class="lilBox"></div>
        <div class="boxAny"></div>
        <h2>Available everywhere.<br />Securely yours.</h2>
        <p class="a">Load up ClipHoarder on any Windows 8<br />device, or just go straight to your<br />Dropbox/SkyDrive folder.</p>
        <p class="b">All your hoards are saved there<br />and nowhere else!</p>
        <div id="simpleNav">
            <ul>
                <li><a class="welcome">Welcome</a></li>
                <li><a class="capture">Capture</a></li>
                <li><a class="organize">Organize</a></li>
                <li><a class="active anywhere">Anywhere</a></li>
            </ul>
        </div>
    </div>
    <div class="fwd"><a class="fwd"></a></div>
    <div class="bkw"><a class="bkw"></a></div>
    <div class="skp"><a class="skp"></a></div>

CSS

html, body {
    padding:0;
    margin:0;
}
body
{
    font-family: 'aleoregular', Aleo, Helvetica, san-serif;
    background-color:#FFFFFF;
}
a, a:link, a:hover, a:visited, a:active {text-decoration:none;}
#wrapper {
    position:absolute;
    top:0;
    left:50%;
    margin-left:-480px;
    width:960px;
    height:100%;
    color:#B4B4B4;
    overflow:visible;
}

/* ------------------------------- */
/* Animated section at top of page */
/* ------------------------------- */

#wrapper .boxAnim {
    height: 237px;
    width: 140px;
    background-image: url(http://buttonpresser.com/img/boxAnim.gif);
    background-position: -2px bottom;
    background-repeat: no-repeat;
    margin: 0px auto;
}

#wrapper .boxCap {
    height:315px;
    width:1056px;
    background-image:url(http://buttonpresser.com/img/boxCap.gif);
    background-position:center top;
    background-repeat:no-repeat;
    margin:37px 0 0 -79px;
}

#wrapper .boxOrg {
    height:240px;
    width:1150px;
    background-image:url(http://buttonpresser.com/img/boxOrg.gif);
    background-position:center top;
    background-repeat:no-repeat;
    margin:0 0 0 -95px;
}

#wrapper .lilBox {
    height:183px;
    width:178px;
    background-image:url(http://buttonpresser.com/img/box.png);
    background-position:center top;
    background-repeat:no-repeat;
    margin:75px auto 0;
    z-index:999;
} 
#wrapper .boxAny {
    height: 613px;
    width: 1366px;
    background-image: url(http://buttonpresser.com/img/boxAny.gif);
    background-position: center top;
    background-repeat: no-repeat;
    margin: -183px 0 -475px -200px;
    z-index: 888;
}

/* ------------------------- */
/* Header and Paragraph text */
/* ------------------------- */

#wrapper h2 {
    font-family: Aleo;
    font-size:64px;
    font-weight:300;
    width:100%;
    text-align:center;
    margin:80px 0 40px 0;
    opacity:0;
}
#wrapper h2 strong {font-family:Aleo;font-weight:700;}
#wrapper h2 strong span{color:#55ff9e;}
#wrapper p {
   ...

JavaScript

$('#wrapper p.a').css('opacity', '1');
$('#wrapper p.b').delay(4400).animate({
    opacity: 1
}, 500);