গুগল কীভাবে "সমস্ত foo.com ফলাফল অবরুদ্ধ করুন" লিঙ্কটিতে প্রদর্শিত হবে "জ্বলজ্বল"?

Question

তিরস্কার করতে:

1. গুগলে যান এবং একটি অনুসন্ধান করুন (উদাহরণস্বরূপ, জেফ আতউডের সন্ধানের জন্য এই লিঙ্কটি অনুসরণ করুন )
2. প্রথম ফলাফল অনুসরণ করুন।
3. ক্রোমে ফিরে যান।
4. লক্ষ্য করুন যে পাঠ্যটিতে প্রদর্শিত হয়েছে যা বলেছে "সমস্ত কোডিংহরর ডটকমের ফলাফলগুলি ব্লক করুন" এর "চকচকে" প্রভাব পড়ে যা এটি আপনার দৃষ্টি আকর্ষণ করার জন্য ঘটে।

ক্রোম ব্যবহার করে গুগলে লগ ইন করার সময় থেকে আমি একটি লিঙ্ক অনুসরণ করেছি এমন সমস্ত সাইটে এটি ঘটে।

এটি কীভাবে অর্জিত হয়?

আমি এটি এখানে রেকর্ড করেছি।

সম্পর্কিত বিভাগ থেকে এইচটিএমএল:

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

Comments

আপনি ক্রোমের কোন সংস্করণ ব্যবহার করছেন? আমি v12.0.742.91 ব্যবহার করছি এবং আমি একটি চকমক দেখতে পাচ্ছি না।

— জন কনডে

@ জোহান অন্য লোকেরাও আমাকে একই কথা বলেন। 11.0.696.77। আমি কেবল এটি রেকর্ড করার চেষ্টা করেছি এবং এটি রেকর্ড হবে না! এটি কোনও অ্যানিমেশন প্রভাবের মতো যা কোনও সাদা আলোর মতো লিঙ্কটি বাম থেকে ডানে চলে যায়।

— মাইকেল প্রাইর

@ মিশেল - সম্ভবত গুগল এটির জন্য একরকম নিম্নমানের এ / বি পরীক্ষা চালাচ্ছে এবং আপনি ভাগ্যবানদের একজন !?

— লম্বা জেফ

এটি ব্যাখ্যা করবে কেন মুখোশটি একটি ফোল্ডারে কল করা হয় experiments। : পি

— esqew

অপেক্ষা করুন - আপনি কি জেফকে ব্লক করে মানুষকে বিভ্রান্ত করার চেষ্টা করছেন?

— মার্ক গ্র্যাভেল

Answer 1

আমি গুগলের শীতল ব্যক্তির তালিকায় নেই, তবে আপনার স্ক্রিনকাস্ট থেকে আমি ধারণা পেয়েছি। আপনি একটি চৌকস সংমিশ্রণ -webkit-background-clip: textএবং কিছু গ্রেডিয়েন্টের সাহায্যে এটি করতে পারেন (আপনি ওয়েবকিট ব্রাউজারে আছেন তবে)। এখানে একটি (অগোছালো) ডেমো রয়েছে:

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

Answer 2

JQuery এর textgrad প্লাগইন এটা করতে পারেন। "টেক্সটস্ক্যান" শিরোনামে স্ক্রোল করুন। এটি বেশ কয়েক বছর পুরানো, যদিও এখনও কাজ করে; এটা মনে মনে প্রথম। আরও সাম্প্রতিক কিছু উপস্থিত থাকার একটি শালীন সুযোগ রয়েছে এবং এটি আরও কীভাবে আরও অনুসন্ধান করবেন সে সম্পর্কে আপনাকে কমপক্ষে কিছু ধারণা দেওয়া উচিত।

[সম্পাদনা করুন: মাইকেল লিখতে গিয়ে এইচটিএমএল স্নিপেট যুক্ত করেছেন] চিত্রটি একেবারে স্থিত করে দেওয়া হয়েছে, এটি প্রায় নিশ্চিত যে তারা ব্লক লিঙ্কটির জন্য সম্পর্কিত একটি (বা সম্ভবত স্প্যান ট্যাগ) জুড়ে স্লাইড করতে কিছুটা স্ক্রিপ্ট ব্যবহার করছে almost । কোনটি, পাঠ্যগ্রাড প্লাগইনটিকে কিছুটা জটিল করার মতো মনে হচ্ছে।

Answer 3

এখানে সিএসএস-কেবলমাত্র সমাধানের লাইভ ডেমো রয়েছে। (কেবল ওয়েবকিট ব্রাউজারগুলি, অ্যানিমেশন পুনরায় খেলতে "রান" ক্লিক করুন)।

এইচটিএমএল:

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

Answer 4

আপনি এর জন্য গ্রেডিয়েন্ট এবং 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;
    }
}

অবশ্যই, আপনি ফায়ারফক্সের জন্য মোজিলা বিক্রেতা উপসর্গ সহ একই কাজ করতে পারেন।