Como o Google coloca o "brilho" no link "bloquear todos os resultados do foo.com" que aparece?

18

Para reproduzir:

  1. Vá para o google e faça uma pesquisa (por exemplo, siga este link para procurar Jeff Atwood )
  2. Siga o primeiro resultado.
  3. Revide no Chrome.
  4. Observe que o texto exibido que diz "Bloquear todos os resultados do codinghorror.com" tem um efeito de "brilho" que ocorre para chamar sua atenção.

Isso acontece em todos os sites dos quais sigo um link enquanto estiver conectado ao Google usando o Chrome.

Como isso é alcançado?

Eu gravei aqui.

O HTML da seção relevante:

<img src="/images/experiments/shimmer_mask.png" style="position: absolute; 
 top: 64px; z-index: 500; border-top-width: 0px; border-right-width: 0px; 
 border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; 
 border-right-style: none; border-bottom-style: none; 
 border-left-style: none; border-color: initial; left: 228px; ">
google Michael Pryor
fonte
11
Qual versão do chrome você está usando? Estou usando a v12.0.742.91 e não vejo brilho.
John Conde
@john outras pessoas me dizem o mesmo. 11.0.696.77. Eu apenas tentei gravá-lo e ele não gravará! É como um efeito de animação que passa pelo link da esquerda para a direita, como uma luz branca.
Michael Pryor
7
@ Michael - Talvez o Google esteja executando algum tipo de teste A / B de baixa porcentagem e você seja um dos sortudos !?
Tall Jeff
11
Isso explicaria por que a máscara está em uma pasta chamada experiments. : P
esqew 15/06
2
espera - você está tentando subverter pessoas para bloquear Jeff?
Marc Gravell

Respostas:

20

Não estou na lista de pessoas legais do Google, mas pelo seu screencast, entendi a ideia. Você pode fazer isso com uma combinação inteligente de -webkit-background-clip: texte alguns gradientes (desde que você esteja em um navegador de kit da web). Aqui está uma demonstração (confusa):

http://jsfiddle.net/N8UjY/3/

Ian Henry
fonte
7

O plugin textgrad do jQuery pode fazer isso. Role para baixo até o cabeçalho "textcan". Isso tem vários anos, embora ainda funcione; é apenas o primeiro a se lembrar. Há uma chance decente de que algo mais recente exista, e isso deve pelo menos lhe dar algumas idéias de como continuar pesquisando.

[Editar: Michael adicionou o trecho de código HTML enquanto eu escrevia] Dada a imagem ser posicionada absolutamente, é quase definitivo que eles estejam apenas usando um pouco de script para deslizá-la pela a associada (ou talvez tag de extensão) para o link do bloco . O que, dado o plugin textgrad, parece complicar um pouco as coisas.

Su '
fonte
5

Aqui está uma demonstração ao vivo de uma solução somente CSS. (Apenas navegadores WebKit, clique em "Executar" para reproduzir a animação).

HTML:

<a href="#" class="kob">Block all results from site.com</a>

CSS:

a.kob{
    color:#36C;
    text-decoration:none;
    font-family:arial, sans-serif;
    font-size:13px;    
    -webkit-animation: wipe 3.0s;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position: -40px 0;
    -webkit-mask-size: 40px 50px;
    -webkit-mask-image:  -webkit-gradient(linear, left top, right top,
                        color-stop(0.00,  rgba(0,0,0,1.0)),
                        color-stop(0.45,  rgba(0,0,0,0.6)),
                        color-stop(0.50,  rgba(0,0,0,0.0)),
                        color-stop(0.55,  rgba(0,0,0,0.6)),
                        color-stop(1.00,  rgba(0,0,0,1.0))); 
}

@-webkit-keyframes wipe {
            0% {
                -webkit-mask-position: -40px 0; 
            }
            100% {
                -webkit-mask-position: 330px 0;
            }
        }
usuario
fonte
2

Você pode usar as animações a gradiente e CSS3 para isso:

 background:-webkit-gradient(linear, left top, right top, from(#000), to(#000), color-stop(0.5, #fff)) 0 0 no-repeat;

@-webkit-keyframes GoogleLikeShine
{
    0%
    {
        background-position:top left;
    }
    100%
    {
        background-position:top right;
    }
}

Obviamente, você pode fazer o mesmo no Firefox com o prefixo do fornecedor Mozilla.

foxy
fonte