Scroll down animation

HTML

<div id="scroll-area">
    <p>
        Scroll for a glimpse
        <br/>
        at our work
    </p>
    <div id="scrollArrow"></div>
</div>


<div id="content">    
</div>

CSS

body {
    background-color: #000;
    color: #FFF;
    font-family: sans-serif;
}

#scroll-area {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    overflow: hidden;
}

@-webkit-keyframes scroller {
    0% {
        opacity: 0;
        top: -15px;
    }
    50% {
        opacity: 1;
        top: 0;
    }
    100% {
        opacity: 0;
        top: 15px;
    }
}

#scrollArrow {
    -webkit-animation-name: scroller;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;    


    background-image: url("http://grouek.com/images/ui/fleche_scroll.svg");
    position: relative;
    width: 27px;
    height: 20px;
    margin: 8px auto;
    background-repeat: no-repeat;
}

JavaScript

$(document).scroll(function () {
    var top  = window.pageYOffset || document.documentElement.scrollTop;
    $("#scroll-area").css("opacity", Math.max(0, 1 - (top/300)));    
});

// test content
var i, $content = $("#content");
for (i=0; i<100; i++) {
    $content.append(i+"<br>");
}