相对于光标的CSS背景位置

Question

I'm wondering how to do an effect like this: http://www.gazprom.com/

(please note, the moving blue background, in top blue menu), and its relativity to cursor position)

Is there any script that follows cursor and changes background position style?

Answer 1

This effect can be achieved using small piece of JavaScript:

JavaScript

document.addEventListener('mousemove', function (event) {
    if (window.event) { // IE fix
        event = window.event;
    }

    // Grab the mouse's X-position.
    var mousex = event.clientX;
    var header = document.getElementById('header');
    header.style.backgroundPosition = mousex/3 + 'px 0';
}, false);

Working Demo

How it works :

1. It binds a function on the mousemove event on document .
2. It grabs the current mouse position using event.clientX .
3. It changes the background-position of element #header with 1/3rd of the speed ( mousex/3 ). Reference