Làm thế nào để Google đưa ra trò chơi Shine Shine trên khối chặn tất cả các kết quả foo.com kết quả xuất hiện?

18

Để chế lại:

Truy cập google và thực hiện tìm kiếm (ví dụ: theo liên kết này để tìm kiếm Jeff Atwood )
Thực hiện theo kết quả đầu tiên.
Quay trở lại trong Chrome.
Quan sát rằng văn bản xuất hiện có nội dung "Chặn tất cả các kết quả về mã hóa" có ảnh hưởng "tỏa sáng" để thu hút ánh mắt của bạn vào đó.

Điều này xảy ra trên tất cả các trang web tôi theo liên kết từ khi đăng nhập vào Google bằng Chrome.

Làm thế nào đạt được điều này?

HTML từ phần có liên quan:

<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
nguồn

1

Phiên bản chrome nào bạn đang sử dụng? Tôi đang sử dụng v12.0.742.91 và tôi không thấy bóng.

— John Conde

@john người khác nói với tôi như vậy. 11.0.696.77. Tôi chỉ cố gắng ghi lại và nó sẽ không ghi lại! Nó giống như một hiệu ứng hoạt hình đi qua liên kết từ trái sang phải, giống như một ánh sáng trắng.

— Michael Pryor

7

@Michael - Có lẽ Google đang chạy một số loại thử nghiệm A / B tỷ lệ thấp về điều này và bạn là một trong những người may mắn!?

— Cao Jeff

1

Điều đó sẽ giải thích tại sao mặt nạ nằm trong một thư mục được gọi experiments. : P

— esqew

2

chờ đã - bạn đang cố gắng lật đổ mọi người để chặn Jeff phải không?

— Marc Gravell

20

Tôi không có trong danh sách người tuyệt vời của Google, nhưng từ screencast của bạn, tôi đã có ý tưởng. Bạn có thể làm điều này với sự kết hợp thông minh -webkit-background-clip: textvà một số độ dốc (miễn là bạn đang sử dụng trình duyệt webkit). Đây là bản demo (lộn xộn):

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

— Ian Henry
nguồn

7

Các jQuery textgrad Plugin có thể làm điều này. Cuộn xuống tiêu đề "textcan". Điều này đã được vài năm tuổi, mặc dù vẫn hoạt động; nó chỉ là người đầu tiên để tâm trí Có một cơ hội tốt một cái gì đó gần đây tồn tại, và điều này ít nhất sẽ cung cấp cho bạn một số ý tưởng làm thế nào để tìm kiếm thêm.

[Chỉnh sửa: Michael đã thêm đoạn mã HTML khi tôi đang viết] Do hình ảnh đó được định vị tuyệt đối, gần như chắc chắn rằng họ chỉ sử dụng một chút tập lệnh để trượt nó qua liên kết (hoặc có thể là thẻ span) cho liên kết khối . Mà, đưa ra các plugin textgrad có vẻ như làm phức tạp mọi thứ một chút.

— Su '
nguồn

5

Đây là bản demo trực tiếp của giải pháp chỉ CSS. (Chỉ trình duyệt WebKit, nhấp vào "Chạy" để phát lại hoạt hình).

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
nguồn

2

Bạn có thể sử dụng gradient và hình động CSS3 cho việc này:

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

Tất nhiên, bạn có thể làm tương tự cho Firefox với tiền tố nhà cung cấp Mozilla.

— foxy
nguồn