Javascript Background Animation

Fri, 13 Nov 2009 05:11:26 +0000

The Windows 7 taskbar does this nifty little background animation when you mouse over an open application’s icon. I wanted to see if the effect could be duplicated on a web page.

Suppose we have a couple of inline elements:

<div>
  <img class="bgmove" src="wsbadge-empty.png">
</div>

<h1>
  <span class="bgmove">Packets!</span>
</h1>

The image is mostly transparent:

We have a background that’s slightly larger than our elements, which lets us position it using negative offsets:

.bgmove {
  background-image: url('wsbadge-bg.png');
  background-repeat: no-repeat;
  background-position: -50px -20px;
}

jQuery lets us do two important things: track mouse motion and determine an element’s dimensions. This lets us shift the backround around when we mouse over each element:

$(document).ready(function(){
  $("div img.bgmove").pngFix();
    $(".bgmove").mousemove(function(e){
    var elWidth = $(e.target).outerWidth();
    var elHeight = $(e.target).outerHeight();
    var bgWidth = 279;
    var bgHeight = 95;
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    //var offX = -1 * (x * (bgWidth - elWidth) / elWidth);  // Against the mouse
    var offX = (x * (bgWidth - elWidth) / elWidth) - (bgWidth - elWidth);  // With the mouse
    var offY = -1 * (y * (bgHeight - elHeight) / elHeight); // Against the mouse
    //var offY = (y * (bgHeight - elHeight) / elHeight) - (bgHeight - elHeight);  // With the mouse
    bgPos = offX + 'px ' + offY + 'px';
    this.style.backgroundPosition = bgPos;
    });
})

You can see it all in action on the demo page. Combining this with jQuery animation is left as an exercise for the reader. The effect works in Firefox, Safari, Chrome, and IE 7+. IE 6 has trouble with the transparent PNG.

javascript on The Official Wireshark Blog

Javascript Background Animation