jQuery – Animating background-position

I really like the new Windows 7. Especially the little gloweffect when you rollover your taskbar icons, so I brought up my own little version with jquery and some CSS background positioning.

1. Photoshop – creating the background

  • Open up a new psd-file with a size of 450px width and 30px height
  • Create a gradient on your first layer: linear with the colors #222222 to #111111 from top to bottom
First gradient

Gradient #111111 to #222222

  • Create a new layer and fill it with a gradient at exactly 225px: radial with the colors #0077DD (100%) to #0077DD (0%) from bottom to top
#0077DD 100% to 0%

#0077DD 100% to 0%

  • Transform the blue sphere a little bit, so it looks like a rounded bar – I took 300% width and 250% height – and move it slightly to the bottom
Transform to a rounded bar

Transform to a rounded bar

2. CSS – setting up the button class

li.button {
width: 150px;
height: 30px;
margin: 20px auto;
border: 1px solid #333;
background: #fff url(../img/button_bg_2.jpg) no-repeat 0 0;
}
 
li.button p {
font-weight: bold;
text-align: center;
color: #eee;
padding: 7px;
font-size: 150%;
text-shadow: 1px 1px 0 #222;
}
  • As you notice, the width of the list item is only 150px – although the image is 450px width. This is because of the offset we need to the left and the right
  • I used text-shadow for the button text, cause I just love this preference (not working in IE)

3. HTML – creating a little list for the buttons

<ul>
	<li class="button">
 
                Contact</li>
	<li class="button">
 
                About</li>
	<li class="button">
 
                Work</li>
</ul>

4. Javascript – animate the background-position

$.fn.bg_position = function(){
    var args = arguments[0] ||
    {};
    var t = args.t;
    var e = args.e;
    var rb = parseInt(t.css("borderRightWidth").substring(0, t.css("borderRightWidth").length - 2));
    var pos = t.position();
    var x = e.pageX - pos.left - rb;
    return x;
}
 
$(document).ready(function(){
    var over = 0;
 
    $(".button").live("mousemove", function(e){
        var t = $(this);
        var x = t.bg_position({
            t: t,
            e: e
        });
        if (over == 0) {
            over = 1;
            t.stop().animate({
                backgroundPosition: -225 + x + "px 0"
            }, 100, function(){
                over = 2;
            });
        }
        if (over == 2) {
            t.css("background-position", -225 + x + "px 0")
        }
    });
 
    $(".button").live("mouseout", function(e){
        var t = $(this);
        var w = t.width();
        var x = t.bg_position({
            t: t,
            e: e
        });
 
        t.stop();
        if (x &gt; (w / 2)) {
            t.animate({
                backgroundPosition: "0px 0"
            }, 200);
        }
        else {
            t.animate({
                backgroundPosition: "-300px 0"
            }, 200);
        }
        over = 0;
    });
})

The custom function bg_position needs a selector and an object, which called the event – the cursor. It computes the offset generated by the mouseposition and the position of your list-item on the page.

The sum of the returned value and the negative relative middle position of your background-image is the final position of the blue sphere, so that it’s always at the tip of your cursor. (450px width -> middle = 225px).

In addition the code differentiates between the side, where the mouse has left the list-item and lets the bar slide out into that direction.


I hope you enjoyed it :) .

Watch a Demo