Battlefield 3 logo effect

Question

Для тех, у кого есть Battlefield 3, кто-то может объяснить мне, как воссоздать эффект, который заставляет «мерцать» логотип. Я знаю, что изображение имеет 3 состояния (мышь, наведение и мыши), но я понятия не имею, как сделать это мерцающим.

Эффект логотипа можно увидеть, войдя в битву BF3 и заложив логотип.

У кого-нибудь есть идеи?

Answer 1

Это событие, которое прилагается к изображению:

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){} 
}); 

Answer 2

Никакая магия здесь, она просто переключает изображение, когда вы наведите указатель мыши. Если вы проверите DOM при зависании логотипа, вы увидите, как фоновая позиция перескакивает с 0 0 на 0 ~ -100 пикселей и, наконец, на 0 ~ -50 пикселей, что с этим изображением http://battlelog-cdn.battlefield.com/public/base/bf3/header-logo2.png?v=590 делает его первым прыжком до последнего " мерцающий "один, затем средний.

Edit: Для достижения этой цели, что вам нужно сделать, это сказать что-то вроде:

$('#logo').hover(function() { 
    var logo = $(this); 

    logo.css('background-position', '0 -100px'); 

    setTimeout(function() { 
     logo.css('background-position', '0 -50px'); 
    }, 5); 
}, function() { 
    $(this).css('background-position', '0 0'); 
}); 

Edit2: Вы можете даже не нужен SetTimeout.

Answer 3

Вы фактически ответили на свой вопрос:

Изображение имеет мыши-аут, парить и мыши в изображение. Вероятно, наведение - это маленький gif, который заменяется изображением мыши, как только оно закончится. Ничего сложного и возможно возможно с чистым css!

Удачи.

Редактировать: Мой ответ был неправильным. Они используют одно изображение, над которым они перемещаются в зависимости от движения мыши. См. Ответ Powerbuoy для правильного объяснения.