¿Cómo coloca Google el "brillo" en el enlace "bloquear todos los resultados de foo.com" que aparece?

18

Para reprobar:

  1. Vaya a google y realice una búsqueda (por ejemplo, siga este enlace para buscar a Jeff Atwood )
  2. Sigue el primer resultado.
  3. Golpear de nuevo en Chrome.
  4. Observe que el texto que aparece que dice "Bloquear todos los resultados de codinghorror.com" tiene un efecto de "brillo" que se produce para atraer su atención.

Esto sucede en todos los sitios de los que sigo un enlace mientras estoy conectado a Google con Chrome.

¿Cómo se logra esto?

Lo he grabado aquí.

El HTML de la sección 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
fuente
1
¿Qué versión de Chrome estás usando? Estoy usando v12.0.742.91 y no veo un brillo.
John Conde
@john otras personas me dicen lo mismo. 11.0.696.77. ¡Intenté grabarlo y no grabará! Es como un efecto de animación que pasa sobre el enlace de izquierda a derecha, como una luz blanca.
Michael Pryor
77
@Michael: ¿Tal vez Google está ejecutando algún tipo de prueba A / B de bajo porcentaje en esto y usted es uno de los afortunados?
Alto Jeff
1
Eso explicaría por qué la máscara está en una carpeta llamada experiments. : P
esqew
2
espera, ¿estás tratando de subvertir a la gente para que bloquee a Jeff?
Marc Gravell

Respuestas:

20

No estoy en la lista de personas interesantes de Google, pero de su screencast se me ocurrió la idea. Puede hacer esto con una combinación inteligente de -webkit-background-clip: textalgunos gradientes (siempre que esté en un navegador webkit). Aquí hay una demostración (desordenada):

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

Ian Henry
fuente
7

El complemento jQuery textgrad puede hacer esto. Desplácese hacia abajo hasta el encabezado "textescan". Esto tiene varios años, aunque todavía funciona; Es solo el primero en pensar. Existe una posibilidad decente de que exista algo más reciente, y esto al menos debería darle algunas ideas sobre cómo seguir buscando.

[Editar: Michael agregó el fragmento de HTML mientras escribía] Dado que la imagen está posicionada de manera absoluta, es casi definitivo que solo estén usando un poco de secuencia de comandos para deslizarla a través de la etiqueta asociada (o tal vez span) para el enlace de bloque . Lo cual, dado el complemento textgrad parece complicar un poco las cosas.

Su '
fuente
5

Aquí hay una demostración en vivo de una solución solo CSS. (Solo navegadores WebKit, haga clic en "Ejecutar" para reproducir la animación).

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;
            }
        }
Mella
fuente
2

Puede usar un gradiente y animaciones CSS3 para esto:

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

Por supuesto, puede hacer lo mismo para Firefox con el prefijo de proveedor de Mozilla.

astuto
fuente