Question

For those that have Battlefield 3, could someone please explain to me how to recreate the effect that makes the logo ‘shimmer’. I know the image has 3 states (mouse-out, hover and mouse-in) but I have no idea how to make it shimmer.

The effect of the logo can be seen by logging into BF3 battlelog and mousing over the logo.

Does anyone have any idea?

Answer 1

This is the event that is attached to the image:

var $headerLogoBF3=$("a.base-header-logo-bf3");
$headerLogoBF3.pageBind("mouseover", function() {
  try {
    $(this).stop().animate({backgroundPosition:"0px -136px"},80, function() {
      $(this).stop().animate({backgroundPosition:"0px -68px"});
    });
  } catch(e){}
});
$headerLogoBF3.pageBind("mouseout",function( {
  try{
    $(this).stop().animate({backgroundPosition:"0px 0px"},"slow");
  } catch(e){}
});