Google do a barrel roll nasıl yapıyor


Belki aranızda daha önce gören olmuştur Google da “do a barrel roll” diye aratırsanız Google sayfası dönüyor.

Make Google Do a Barrel Roll

Bende ilk gördüğümde ulan bu nasıl yapılır dedim ve kodlara baktım ama Google ın SEO gibi bir derdi olmadığı için sitedeki kodlar iğrenç, kaynağa bakarsanız kusarsınız yani o derece.

Peki Google ın yaptığı bu şaka veya sürprizi başka bir web sitesine nasıl yaparız? ASlında tüm olay CSS in rotate(360deg) koduyla yapılıyor, devamı aşağıda.


Google ın şakasını herhangi bir web sitesinde de yapmak için siteye eklenecek CSS kodu aşağıdaki gibidir:

<style>
.barrel_roll {
-webkit-transition: -webkit-transform 4s ease;
-webkit-transform: rotate(360deg);
-moz-transition: -moz-transform 4s ease;
-moz-transform: rotate(360deg);
-o-transition: -o-transform 4s ease;
-o-transform: rotate(360deg);
transition: transform 4s ease;
transform: rotate(360deg);
}
</style>

Şimdi dönmesini istediğimiz eleman neyse onu belirlememiz gerekiyor, Google body tagını belirlediği için tüm site dönüyor, eğer Google gibi tüm site dönsün isterseniz <body class= ına yukarıdaki css i yani barrel_roll u eklememiz gerekiyor, yani:

<body class="barrel_roll">

Şimdi Google gibi eğer do a barrel roll aranırsa sitede sitenin dönmesini sağlamak için gerekli script aşağıdaki gibi, bunuda CSS gibi sitenin <head></head> taglerinin içerisine ekliyoruz.

<input type="text" id="search_text">
<script>
jQuery('#search_text').bind('change keyup',function(){
var str = String( jQuery(this).val().toLowerCase() );
if(str.indexOf('"do a barrel') == 0) {
jQuery('body').addClass('barrel_roll');
setTimeout(function(){
jQuery('body').removeClass('barrel_roll');
},4000);
jQuery(this).unbind('change keyup');
}
});
</script>

Buradaki classlar, id ler ve arama sorgusu sizin istediğiniz gibi olabilir yöntem budur. Daha fazla merak ederseniz benim blogun kaynağı Google dan daha temiz o yüzden bu sayfanın kaynağını bakabilirsiniz, ben sadece bu sayfa için scripti düzenledim.

İyi eğlenceler.

Yazar: Volkan Yılmaz

Digital Marketing & Growth Hacking #SEO #wolkanca #cycling merhaba@volkanyilmaz.com.tr

“Google do a barrel roll nasıl yapıyor” için 1 yorum