Wie setzt Google den "Glanz" auf den angezeigten Link "Alle foo.com-Ergebnisse blockieren"?

18

Um zu rügen:

Gehen Sie zu Google und führen Sie eine Suche durch (folgen Sie beispielsweise diesem Link, um nach Jeff Atwood zu suchen ).
Folgen Sie dem ersten Ergebnis.
In Chrome zurückschlagen.
Beachten Sie, dass der angezeigte Text "Block all codinghorror.com results" einen "Shine" -Effekt hat, der auftritt, um Ihr Auge darauf zu lenken.

Dies geschieht auf allen Websites, von denen aus ich einem Link folge, während ich mit Chrome bei Google angemeldet bin.

Wie wird das erreicht?

Ich habe es hier aufgenommen.

Der HTML-Code aus dem entsprechenden Abschnitt:

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

1

Welche Chrome-Version verwenden Sie? Ich verwende v12.0.742.91 und sehe keinen Glanz.

— John Conde

@ John andere Leute sagen mir das gleiche. 11.0.696.77. Ich habe gerade versucht, es aufzunehmen und es wird nicht aufgenommen! Es ist wie ein Animationseffekt, der von links nach rechts über den Link läuft, wie ein weißes Licht.

— Michael Pryor

7

@Michael - Vielleicht führt Google einen A / B-Test mit niedrigem Prozentsatz durch, und Sie sind einer der Glücklichen !?

— Tall Jeff

1

Das würde erklären, warum sich die Maske in einem Ordner mit dem Namen befindet experiments. : P

— esqew

2

Warten Sie - versuchen Sie, Leute dazu zu bringen, Jeff zu blockieren?

— Marc Gravell

20

Ich stehe nicht auf Googles cooler Personenliste, aber aus Ihrem Screencast habe ich die Idee. Sie können dies mit einer cleveren Kombination aus -webkit-background-clip: textund einigen Farbverläufen tun (vorausgesetzt, Sie verwenden einen Webkit-Browser). Hier ist eine (chaotische) Demo:

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

— Ian Henry
quelle

7

Das jQuery-Textgrad-Plugin kann dies tun. Scrolle runter zum "textscan" Header. Dies ist einige Jahre alt, funktioniert aber immer noch; Es ist nur der erste, der etwas dagegen hat. Es gibt eine gute Chance, dass etwas Neueres existiert, und dies sollte Ihnen zumindest einige Ideen geben, wie Sie weiter suchen können.

[Bearbeiten: Michael hat das HTML-Snippet hinzugefügt, während ich schrieb] Da das Bild absolut positioniert ist, ist es fast sicher, dass sie nur ein bisschen Skript verwenden, um es über das zugehörige a (oder vielleicht das span-Tag) für den Blocklink zu schieben . Was angesichts des Textgrad-Plugins etwas komplizierter erscheinen mag.

— Su '
quelle

5

Hier ist eine Live-Demo einer Nur-CSS-Lösung. (Nur WebKit-Browser, klicken Sie auf "Ausführen", um die Animation abzuspielen.)

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

— Nick
quelle

2

Sie können hierfür einen Farbverlauf und CSS3-Animationen verwenden:

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

Dasselbe können Sie natürlich auch für Firefox mit dem Mozilla-Herstellerpräfix tun.

— foxy
quelle