Acorn scroller

by lukerichison

HTML

<div id="gs"><div>
    <a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an acorn" />
        <label for="">first gallery</label>
    </a><a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an acorn" />
        <label for="">gallery title long long long long long long</label>
    </a><a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an acorn" />
        <label for="">gallery title long long long long long long</label>
    </a><a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an acorn" />
        <label for="">gallery title long long long long long long</label>
    </a><a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an acorn" />
        <label for="">gallery title long long long long long long</label>
    </a><a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an acorn" />
        <label for="">gallery title long long long long long long</label>
    </a><a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an acorn" />
        <label for="">gallery title long long long long long long</label>
    </a><a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an acorn" />
        <label for="">gallery title long long long long long long</label>
    </a><a href="#">
        <img src="http://www.fruitstandsoftware.com/blog/wp-content/uploads/2013/05/Acorn.png" alt="I'm an acorn" title="I'm an...

CSS

body{
    margin: 0;
    padding: 0;
}
#gs a,
#gs a:before,
#gs a:after {
    box-shadow: 0 1px 10px -2px rgba(0,0,0,0.8);
    border: 0.5em solid #fff;
    border-bottom-width: 2.25em;
}
#gs a img,
#gs a:before,
#gs a:after {
    background-color: #CCC;
    display: block;
}

#gs {
    overflow-x: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
#gs div {
    position: relative;
}
#gs a {
    display: inline-block;
    margin: 1em 2em;
    position: relative;
}
#gs a img {
    position: relative;
    padding: 0;
    margin: 0;
}
#gs a label {
    position: absolute;
    bottom: -1.75em;
    overflow: hidden;
    width: 100%;
    display: block;
    line-height: 1.25em;
    white-space: nowrap;
    margin-right: -1em;
}
#gs a:before,
#gs a:after {
    content: "";
    height: 100%;
    width: 100%;
    top: -8px;
    position: absolute;
}


#gs a:before {
    z-index: -1;
    left: -8px;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
}
#gs a:after {
    z-index: -2;
    left: -5px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
#gs a:nth-child(5n+1):before {
    left: -3px;
    -webkit-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    transform: rotate(-9deg);
}
#gs a:nth-child(5n+1):after {
    left: 4px;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}
#gs a:nth-child(5n+2):before {
    left: -5px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}
#gs a:nth-child(5n+2):after {
   ...

JavaScript

var scroller, w=0, h=0, s=$('#gs'), c=s.children();
s.hover(
    function(){
        $(this).mousemove(function(e){
            h = (e.pageX - $(this).offset().left)/($(this).width()+1)-.5;
        });
        scroller = setInterval(function(){
            Scroller(Math.floor(Math.pow(Math.round(h*100),2)/600)*(-1)*Math.round(Math.abs(h)/h));
        }, 1);
    }, function(){
        clearInterval(scroller);
    }
).children().children().each(function(){
    w -= $(this).outerWidth(true);
});

var Scroller = function(left){
    c.css('left', Math.max(Math.min(c.position().left + left,0), w+s.outerWidth(true)));
};