In che modo Google mette il "brillare" sul link "blocca tutti i risultati di foo.com" che appare?

18

Per riprodurre:

Vai su google e fai una ricerca (ad esempio, segui questo link per cercare Jeff Atwood )
Segui il primo risultato.
Rispondi in Chrome.
Osserva che il testo che appare "Blocca tutti i risultati di codinghorror.com" ha un effetto di "lucentezza" che si presenta per attirare l'attenzione su di esso.

Questo accade su tutti i siti da cui seguo un collegamento durante l'accesso a Google tramite Chrome.

Come si ottiene questo risultato?

L'HTML dalla sezione pertinente:

<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

1

Quale versione di Chrome stai usando? Sto usando v12.0.742.91 e non vedo un bagliore.

— John Conde

@john altre persone mi dicono lo stesso. 11.0.696.77. Ho appena provato a registrarlo e non registrerà! È come un effetto di animazione che supera il collegamento da sinistra a destra, come una luce bianca.

— Michael Pryor,

7

@Michael - Forse Google sta eseguendo una specie di test A / B a bassa percentuale su questo e tu sei uno dei fortunati !?

— Tall Jeff,

1

Ciò spiegherebbe perché la maschera si trova in una cartella chiamata experiments. : P

— esqew,

2

aspetta - stai cercando di sovvertire la gente nel bloccare Jeff?

— Marc Gravell

20

Non sono nell'elenco delle persone interessanti di Google, ma dal tuo screencast ho avuto l'idea. Puoi farlo con una combinazione intelligente di -webkit-background-clip: texte alcuni gradienti (a condizione che tu sia su un browser webkit). Ecco una demo (disordinata):

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

— Ian Henry
fonte

7

Il plug-in textgrad jQuery può farlo. Scorri verso il basso fino all'intestazione "textcan". Questo ha diversi anni, anche se funziona ancora; è solo il primo a pensare. C'è una buona possibilità che esista qualcosa di più recente, e questo dovrebbe almeno darti alcune idee su come proseguire la ricerca.

[Modifica: Michael ha aggiunto lo snippet HTML mentre stavo scrivendo] Dato che l'immagine è posizionata in modo assoluto, è quasi certo che stanno solo usando un po 'di script per farla scorrere attraverso un (o forse tag span) associato per il collegamento a blocchi . Il che, dato il plugin textgrad, sembra complicare un po 'le cose.

— su'
fonte

5

Ecco una demo live di una soluzione solo CSS. (Solo browser WebKit, fare clic su "Esegui" per riprodurre l'animazione).

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

— tacca
fonte

2

È possibile utilizzare un gradiente e animazioni CSS3 per questo:

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

Naturalmente, puoi fare lo stesso per Firefox con il prefisso del fornitore Mozilla.

— foxy
fonte