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 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.
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, bunu da 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.