Mousewheel Event

by dirtyd77

CSS

body {
    background-image: url("http://1.bp.blogspot.com/-RWCJ3dGhCmg/TlgE8ycIJJI/AAAAAAAACzM/xnIZGTM_8Z8/s1600/It%2527s+Called+Bling.jpg");
    background-repeat: repeat;
    background-position: 0px 0px;
}

JavaScript

if (window.addEventListener) {
    window.addEventListener("mousewheel", doScroll, false);
    window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    window.attachEvent("onmousewheel", doScroll);
}

var bgPosition = [0, 0] //x,y

function doScroll (e) {
    // cross-browser wheel delta
    e = window.event || e;
    
    e.preventDefault();
    
    var xWheel = e.wheelDeltaX,
        yWheel = e.wheelDeltaY,
        isX = Math.abs(xWheel) > Math.abs(yWheel),
        delta = (isX ? xWheel : yWheel) > 0 ? 1 : -1,
        changeValue = 20;

 
    // change background
    bgPosition[isX ? 0 : 1] = bgPosition[isX ? 0 : 1] + (changeValue*delta);
    
    $('body').css({
        'background-position': bgPosition[0] + 'px ' + bgPosition[1] + 'px'
    });
    
};