Google "do a barrel roll" gibi sayfa döndürme nasıl yapılı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.


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:




Ş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


Ş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 taglerinin içerisine ekliyoruz.


<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.

Kaynak & önizleme: Wolkanca

Teşekkürler hocam.

googleye da do yazıyorum dönüyor hemen. otomatik tnımlamadan heralde :) başımı dönderdi.

Güzelmiş. Denemek lazım. :) Teşekkürler Atakan.