bgWalker.JS

test fiddle

by stichoza

HTML

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
     $('#backian').bgWalker({
        area: $(document),
        sensitivity: 10
    });
     $('#backian').animate({'background-position': '500px 600px'});
})
</script>
<body>
    <div id="backian"></div>
</body>
</html>

CSS

#backian {
    background-image: url('http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/543923_574861889196546_1358174368_n.jpg');
    width: 300px;
    height: 200px;
    position: absolute;
    top: 50px;
    left: 60px;
}

JavaScript

(function($) {
          
    $.fn.bgWalker = function(options) {
        
        var defaults = {                
            sensitivity: 50,
            easing: 0,
            position: 'center',
            area: $(this)
        }; 
        var options = $.extend(defaults, options);
        var areaObjOp = options.area;
        var areaObj = (typeof(areaObjOp)=='string') ? $(areaObjOp) : areaObjOp;
        areaObj.css({border: '1px solid red'});
        var mainObj = $(this);
        var bgImage = new Image();
        bgImage.src = mainObj.css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
        
        var bgWidth = bgImage.width;
        var bgHeight = bgImage.height;
        
        areaObj.mousemove(function(e){
            var coef = options.sensitivity/(-1000);
            var offX = (bgWidth/2)+(e.pageX-(areaObj.outerWidth()/2))*coef;
            var offY = (bgHeight/2)+(e.pageY-(areaObj.outerHeight()/2))*coef;
            mainObj.css({
                'background-position-x': offX+'px',
                'background-position-y': offY+'px'
            });
            console.log(offX+'px '+offY+'px');
        });
        /*
        
        var step = options.step;
        var lower, upper;
        var children = $(this).children();
        var count = children.length;
        var obj, next, prev;        
        var pages = Math.floor(count/step);
        var page = (options.randomstart) ? Math.floor(Math.random()*pages)+1 : 1;
        var timeout;
        var clicked = false;
        
        function show(){
            clearTimeout(timeout);
            lower = ((page-1) * step);
            upper = lower+step;
            $(children).each(function(i){
                var child = $(this);
                child.hide();
                if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
                if(options.nextprev){
                    if(upper >=...