19

To repro:

  1. Go to google and do a search (for example, follow this link to search for Jeff Atwood)
  2. Follow the first result.
  3. Hit back in Chrome.
  4. Observe that the text that appears that says "Block all codinghorror.com results" has a "shine" affect that occurs to draw your eye to it.

This happens on all sites I follow a link from while logged in to Google using Chrome.

How is this achieved?

I've recorded it here.

The HTML from the relevant section:

<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; ">
Michael Pryor
  • 935
  • 6
  • 20
  • 1
    What version of chrome are you using? I'm using v12.0.742.91 and I don't see a shine. – John Conde Jun 14 '11 at 20:40
  • @john other people tell me the same. 11.0.696.77. I just tried to record it and it won't record! It's like an animation effect that goes over the link from left to right, like a white light. – Michael Pryor Jun 14 '11 at 20:50
  • 7
    @Michael - Maybe Google is running some kind of low percentage A/B test on this and you are one of the lucky ones!? – Tall Jeff Jun 14 '11 at 21:11
  • 1
    That would explain why the mask is in a folder called experiments. :P – esqew Jun 15 '11 at 02:59
  • 2
    wait - are you trying to subvert people into blocking Jeff? – Marc Gravell Jun 15 '11 at 12:15
  • I believe the google +1 has the same using this image http://www.google.com/images/experiments/nav_logo78.png and a transition effect – mplungjan Jul 01 '11 at 11:44

4 Answers4

20

I'm not on Google's cool person list, but from your screencast I got the idea. You can do this with a clever combination of -webkit-background-clip: text and some gradients (provided you're on a webkit browser). Here's a (messy) demo:

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

Ian Henry
  • 316
  • 1
  • 3
7

The jQuery textgrad plugin can do this. Scroll down to the "textscan" header. This is several years old, though still works; it's just the first to mind. There's a decent chance something more recent exists, and this should at least give you some ideas how to go about searching further.

[Edit: Michael added the HTML snippet while I was writing] Given that image is positioned absolutely, it's almost definite that they're just using a bit of script to slide it across the associated a(or maybe span tag) for the block link. Which, given the textgrad plugin seems like complicating things a bit.

Su'
  • 19,332
  • 3
  • 41
  • 65
5

Here's a live demo of a CSS-only solution. (WebKit browsers only, click "Run" to replay 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;
            }
        }
Nick
  • 20,466
  • 4
  • 44
  • 81
2

You can use the a gradient, and CSS3 animations for this:

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

Of course, you can do the same for Firefox with the Mozilla vendor prefix.

foxy
  • 121
  • 1