Як Google додає "блиск" на посилання "заблокувати всі результати foo.com", яке з'являється?

18

Попросити:

Перейдіть до google та проведіть пошук (наприклад, перейдіть за цим посиланням, щоб шукати Джеффа Етвуда )
Дотримуйтесь першого результату.
Натисніть назад у Chrome.
Зауважте, що текст, який з’являється з надписом "Блокувати всі результати 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

Яку версію хрому ви використовуєте? Я використовую v12.0.742.91 і не бачу блиску.

— Джон Конде

@john інші люди кажуть мені те саме. 11.0.696.77. Я просто спробував записати його, і він не запише! Це як анімаційний ефект, який переходить посилання зліва направо, як біле світло.

— Майкл Прайор

7

@Michael - Можливо, Google проводить якийсь тест на низький відсоток A / B щодо цього, і ви один із щасливчиків !?

— Високий Джефф

1

Це пояснило б, чому маска знаходиться в папці, яка називається experiments. : P

— esqew

2

зачекайте - ви намагаєтеся перешкодити людям блокувати Джеффа?

— Марк Гравелл

20

Я не в списку крутих людей від Google, але з вашого екранного екрана я отримав ідею. Це можна зробити за допомогою розумного поєднання -webkit-background-clip: textградієнтів та деяких градієнтів (за умови, що ви переглядаєте веб-браузер). Ось (безладна) демонстрація:

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

— Ян Генрі
джерело

7

Модуль текстової програми jQuery може це зробити. Прокрутіть униз до заголовка "тексти". Це кілька років, хоча все ще працює; це просто перший на розум. Існує гідний шанс, що є щось більш недавнє, і це повинно хоча б дати вам кілька ідей, як іти далі про пошук.

[Редагувати: Майкл додав фрагмент HTML, поки я писав] З огляду на те, що зображення розташоване абсолютно, майже певно, що вони просто використовують трохи сценарію, щоб перенести його через пов'язаний (або, можливо, тег прольоту) для блокової посилання . Що, зважаючи на плагін 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.

— фокси
джерело