W jaki sposób Google umieszcza „połysk” w wyświetlonym linku „blokuj wszystkie wyniki foo.com”?

18

Aby wykonać repro:

  1. Przejdź do Google i przeprowadź wyszukiwanie (na przykład kliknij ten link, aby wyszukać Jeff Atwood )
  2. Śledź pierwszy wynik.
  3. Hit w Chrome.
  4. Zauważ, że pojawiający się tekst z napisem „Zablokuj wszystkie wyniki codinghorror.com” ma efekt „połysku”, który pojawia się, aby zwrócić na Ciebie uwagę.

Dzieje się tak we wszystkich witrynach, z których korzystam z linku, gdy jestem zalogowany w Google za pomocą Chrome.

Jak to się osiąga?

Nagrałem to tutaj.

HTML z odpowiedniej sekcji:

<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
źródło
1
Jakiej wersji Chrome używasz? Używam wersji 12.0.742.91 i nie widzę połysku.
John Conde
@ john inni mówią mi to samo. 11.0.696.77. Właśnie próbowałem to nagrać, ale nie da się nagrać! To jak efekt animacji, który przechodzi nad linkiem od lewej do prawej, jak białe światło.
Michael Pryor
7
@Michael - Może Google przeprowadza w tym zakresie test niskiego procentu A / B i jesteś jednym z tych szczęśliwców !?
Wysoki Jeff
1
To by wyjaśniało, dlaczego maska ​​znajduje się w folderze o nazwie experiments. : P
esqew
2
czekaj - próbujesz nakłonić ludzi do blokowania Jeffa?
Marc Gravell

Odpowiedzi:

20

Nie jestem na liście fajnych osób Google, ale z twojego screencastu wpadłem na pomysł. Możesz to zrobić za pomocą sprytnej kombinacji -webkit-background-clip: texti niektórych gradientów (pod warunkiem, że korzystasz z przeglądarki internetowej). Oto (niechlujne) demo:

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

Ian Henry
źródło
7

JQuery textgrad Wtyczka może to zrobić. Przewiń w dół do nagłówka „Textcan”. Ma kilka lat, choć nadal działa; to tylko pierwszy pomysł. Istnieje spora szansa, że ​​istnieje coś nowszego, a to powinno przynajmniej dać ci kilka pomysłów na dalsze poszukiwania.

[Edycja: Michael dodał fragment kodu HTML podczas pisania] Biorąc pod uwagę, że obraz jest pozycjonowany absolutnie, jest prawie pewne, że używają odrobiny skryptu, aby przesunąć go po powiązanym (lub może znaczniku span) linku do bloku . Co, biorąc pod uwagę wtyczkę textgrad, wydaje się to nieco komplikować.

Su ”
źródło
5

Oto demo na żywo rozwiązania opartego wyłącznie na CSS. (Tylko przeglądarki WebKit, kliknij „Uruchom”, aby odtworzyć animację).

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;
            }
        }
Nacięcie
źródło
2

Możesz użyć gradientu i animacji CSS3 do tego:

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

Oczywiście możesz zrobić to samo dla Firefoksa z prefiksem dostawcy Mozilla.

lisi
źródło