Google "दिखाई देने वाली" foo.com परिणामों को "ब्लॉक करें" लिंक पर कैसे डालता है?

18

करने के लिए:

Google पर जाएं और एक खोज करें (उदाहरण के लिए, जेफ एटवुड की खोज के लिए इस लिंक का अनुसरण करें )
पहले परिणाम का पालन करें।
क्रोम में वापस मारो।
निरीक्षण करें कि जो पाठ दिखाई देता है वह कहता है कि "सभी codinghorror.com परिणामों को अवरुद्ध करें" में एक "चमक" प्रभाव होता है जो आपकी आंख को अपनी ओर खींचने के लिए होता है।

यह उन सभी साइटों पर होता है जिन्हें मैं क्रोम का उपयोग करके Google में लॉग इन करते समय एक लिंक का अनुसरण करता हूं।

यह कैसे प्राप्त किया जाता है?

प्रासंगिक अनुभाग से 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 का उपयोग कर रहा हूं और मुझे चमक नहीं दिख रही है।

— जॉन कोनडे

@ जॉन अन्य लोग भी मुझे यही बताते हैं। 11.0.696.77। मैंने अभी इसे रिकॉर्ड करने की कोशिश की है और यह रिकॉर्ड नहीं होगा! यह एक एनीमेशन प्रभाव की तरह है जो सफेद रोशनी की तरह बाएं से दाएं लिंक पर जाता है।

— माइकल प्रायर

7

@ मिचेल - शायद Google इस पर किसी प्रकार का कम प्रतिशत A / B परीक्षण चला रहा है और आप भाग्यशाली लोगों में से एक हैं !?

— टॉल जेफ

1

यह बताएगा कि मास्क नामक फोल्डर में क्यों है experiments। : P

— 2

2

प्रतीक्षा - क्या आप जेफ़ को अवरुद्ध करने में लोगों को हटाने की कोशिश कर रहे हैं?

— मार्क ग्रेवेल

20

मैं Google की शांत व्यक्ति सूची में नहीं हूं, लेकिन आपके पेंचकस से मुझे यह विचार मिला। आप इसे -webkit-background-clip: textऔर कुछ ग्रेडिएंट के एक चतुर संयोजन के साथ कर सकते हैं (बशर्ते आप किसी वेबकिट ब्राउज़र पर हों)। यहाँ (गन्दा) डेमो है:

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

— इयान हेनरी
स्रोत

7

JQuery textgrad प्लगइन ऐसा कर सकते हैं। "टेक्स्टस्कैन" हेडर पर स्क्रॉल करें। यह कई साल पुराना है, हालांकि अभी भी काम करता है; यह सिर्फ पहली बात है। वहाँ एक अच्छा मौका कुछ और हाल ही में मौजूद है, और यह आपको कम से कम कुछ विचार देना चाहिए कि आगे की खोज कैसे करें।

[संपादित करें: माइकल ने लिखते समय HTML स्निपेट को जोड़ा] यह देखते हुए कि छवि बिल्कुल स्थित है, यह लगभग निश्चित है कि वे इसे ब्लॉक करने के लिए संबंधित (या शायद अवधि टैग) में स्लाइड करने के लिए स्क्रिप्ट का थोड़ा सा उपयोग कर रहे हैं। । जिसे देखते हुए, टेक्स्टग्रेड प्लगइन चीजों को थोड़ा जटिल करने जैसा लगता है।

— र '
स्रोत

5

यहां CSS-only समाधान का लाइव डेमो दिया गया है। (WebKit ब्राउज़र केवल, एनीमेशन चलाने के लिए "रन" पर क्लिक करें)।

HTML:

<a href="#" class="kob">Block all results from site.com</a>

सीएसएस:

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

बेशक, आप मोज़िला विक्रेता उपसर्ग के साथ फ़ायरफ़ॉक्स के लिए भी ऐसा ही कर सकते हैं।

— लोमड़ी की तरह का
स्रोत