Comment Google met-il le «éclat» sur le lien «bloquer tous les résultats foo.com» qui apparaît?

18

Pour reprocher:

Allez sur Google et faites une recherche (par exemple, suivez ce lien pour rechercher Jeff Atwood )
Suivez le premier résultat.
Revenez dans Chrome.
Observez que le texte qui apparaît et qui dit "Bloquer tous les résultats de codinghorror.com" a un effet "éclat" qui se produit pour attirer votre attention.

Cela se produit sur tous les sites dont je suis le lien lorsque je suis connecté à Google à l'aide de Chrome.

Comment y parvient-on?

Le code HTML de la section appropriée:

<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
source

1

Quelle version de Chrome utilisez-vous? J'utilise la v12.0.742.91 et je ne vois aucun éclat.

— John Conde

@john d'autres personnes me disent la même chose. 11.0.696.77. J'ai juste essayé de l'enregistrer et il n'enregistrera pas! C'est comme un effet d'animation qui passe sur le lien de gauche à droite, comme une lumière blanche.

— Michael Pryor

7

@Michael - Peut-être que Google exécute une sorte de test A / B à faible pourcentage sur ce point et que vous êtes l'un des plus chanceux!?

— Tall Jeff

1

Cela expliquerait pourquoi le masque se trouve dans un dossier appelé experiments. : P

— esqew

2

attendez - essayez-vous de renverser les gens pour bloquer Jeff?

— Marc Gravell

20

Je ne suis pas sur la liste des personnes sympas de Google, mais à partir de votre capture d'écran, j'ai eu l'idée. Vous pouvez le faire avec une combinaison intelligente de -webkit-background-clip: textet certains dégradés (à condition que vous soyez sur un navigateur webkit). Voici une démo (désordonnée):

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

— Ian Henry
source

7

Le plugin jQuery textgrad peut le faire. Faites défiler jusqu'à l'en-tête "TextScan". Cela a plusieurs années, mais fonctionne toujours; c'est juste le premier à l'esprit. Il y a de bonnes chances que quelque chose de plus récent existe, et cela devrait au moins vous donner des idées sur la façon de poursuivre la recherche.

[Modifier: Michael a ajouté l'extrait HTML pendant que j'écrivais] Étant donné que l'image est positionnée de manière absolue, il est presque certain qu'ils utilisent simplement un peu de script pour la faire glisser sur le a associé (ou peut-être la balise span) pour le lien de bloc . Ce qui, étant donné le plugin textgrad, semble compliquer un peu les choses.

— Su '
source

5

Voici une démonstration en direct d'une solution uniquement CSS. (Navigateurs WebKit uniquement, cliquez sur "Exécuter" pour rejouer l'animation).

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

— pseudo
source

2

Vous pouvez utiliser les animations a gradient et CSS3 pour cela:

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

Bien sûr, vous pouvez faire de même pour Firefox avec le préfixe du fournisseur Mozilla.

— rusé
source