Smooth scroller based on mouse position (Jquery)

Solution 1:

You can set the image as the background of the div and animate the background-position with jquery. (and because it got me interested, here is an implementation)

demo http://jsfiddle.net/gaby/72yhW/

html

<div class="backdrop">
    <div class="direction left"></div>
    <div class="direction right"></div>
</div>

css

.backdrop{
    position:relative;
    height:300px; /*could be anything really..*/
    width:400px; /*could be anything really..*/
    border:3px solid #6699ff;
    background: url('YOUR IMAGE PATH GOES HERE') 0 0 repeat-x;
}

.direction{
    position:absolute;
    width:50%;
    height:100%;
}
.left{left:0;top:0;}
.right{right:0;top:0;}

jquery

$(function(){
    var x=0,
        y=0,
        rate=0,
        maxspeed=10;
    var backdrop = $('.backdrop');

    $('.direction', backdrop).mousemove(function(e){
        var $this = $(this);
        var left = $this.is('.left');

        if (left){
            var w = $this.width();
            rate = (w - e.pageX - $(this).offset().left + 1)/w;
        }
        else{
            var w = $this.width();
            rate = -(e.pageX - $(this).offset().left + 1)/w;
        }
    });

    backdrop.hover(
        function(){
            var scroller = setInterval( moveBackdrop, 10 );
            $(this).data('scroller', scroller);
        },
        function(){
            var scroller = $(this).data('scroller');
            clearInterval( scroller );
        }
    );   

    function moveBackdrop(){
        x += maxspeed * rate;
        var newpos = x+'px '+y+'px';
        backdrop.css('background-position',newpos);
    }
});

Solution 2:

There are two existing awesome jQuery plugins that do exactly what you seek:

1) http://manos.malihu.gr/jquery-thumbnail-scroller

2) http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/

Number 1 is more refined in that it has a smoother scrolling action and can optionally highlight the current hovered over item.

Solution 3:

There's a jQuery plugin called Smooth Div Scroll that does exactly this. It scrolls content smoothly and you can control it by hovering with the mouse over two hotspots (left and right, visible or invisible) inside the scroller. There is an option for infinite scrolling.