Как Google помещает «блеск» в появившуюся ссылку «заблокировать все результаты foo.com»?

18

Для воспроизведения:

  1. Зайдите в Google и выполните поиск (например, перейдите по этой ссылке, чтобы найти Джеффа Этвуда )
  2. Следуй первому результату.
  3. Отбей в Хроме.
  4. Обратите внимание, что текст, который гласит «Заблокировать все результаты codinghorror.com», имеет эффект «блеск», который привлекает ваше внимание.

Это происходит на всех сайтах, по которым я перехожу по ссылке при входе в Google с помощью Chrome.

Как это достигается?

Я записал это здесь.

HTML из соответствующего раздела:

<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 Майкл Прайор
источник
1
Какую версию Chrome вы используете? Я использую v12.0.742.91 и не вижу блеска.
Джон Конде
@ Джон, другие люди говорят мне то же самое. 11.0.696.77. Я просто попытался записать это, и он не будет записывать! Это как анимационный эффект, который проходит по ссылке слева направо, как белый свет.
Майкл Прайор
7
@Michael - Может быть, Google проводит какой-то A / B-тест с низким процентом, и вы один из счастливчиков !?
Высокий Джефф
1
Это объясняет, почему маска находится в папке с именем experiments. : P
esqew
2
подождите - вы пытаетесь подорвать людей, чтобы заблокировать Джефф?
Марк Гравелл

Ответы:

20

Я не в крутом списке людей Google, но из твоей скриншота я понял. Вы можете сделать это с умной комбинацией -webkit-background-clip: textи некоторыми градиентами (при условии, что вы используете браузер webkit). Вот (грязная) демонстрация:

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

Ян Генри
источник
7

JQuery textgrad плагин может это сделать. Прокрутите вниз до заголовка "textcan". Это несколько лет, хотя все еще работает; это просто первое, что приходит на ум. Есть неплохой шанс, что что-то более новое существует, и это должно, по крайней мере, дать вам некоторые идеи о том, как продолжать поиск.

[Редактировать: Майкл добавил фрагмент HTML, когда я писал] Учитывая, что изображение расположено абсолютно, почти определенно, что они просто используют небольшой скрипт, чтобы скользить по соответствующему (или, возможно, тегу span) для ссылки блока , Что, учитывая плагин textgrad, кажется, немного усложняет ситуацию.

Су»
источник
5

Вот живая демонстрация решения только для CSS. (Только для браузеров WebKit, нажмите «Выполнить» для воспроизведения анимации).

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;
            }
        }
Ник
источник
2

Вы можете использовать градиент и CSS3 анимацию для этого:

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

Конечно, вы можете сделать то же самое для Firefox с префиксом вендора Mozilla.

лисий
источник