Again, Google entertained it’s users with a “dο a barrel roll” gimmick which spins the entire search page for this search query. It was a trending topic in twitter.
It was done using the css3 transitions & transforms, while showcasing the power of CSS3, a presentation feature of modern browsers.
I tried to figure out the implementation part of it by googling out which didn’t return me the actual implementation(which works).So I did a small reverse engineering to figure that out.
This purely works on the CSS3 transitions property whose specifications are still in the draft form. So all properties associated with them should be prefixed with “-moz-” for use in Gecko (Mozilla Firefox browser). For compatibility with WebKit, you should also use the “-webkit-” prefix, and for Opera compatibility, use the “-o-” prefix.
You would specify the transition property as -moz-transition, -webkit-transition, and -o-transition.
Add this styles for body tag which performs the spin (alternately you can use the class as well) compatible with latest of the browsers.
body{
-moz-animation-name: roll;
-moz-animation-duration: 4s; //spin 360 deg in 4 sec
-moz-animation-iteration-count: 1; //spin only once
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
The CSS function rule “roll” is defined to rotate 360 deg.
@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } }
The basic version of code which can be used/tested.
<html>
<head>
<style>
@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } }
@-o-keyframes roll { 100% { -o-transform: rotate(360deg); } }
@-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } }
body{
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
</style>
</head>
<body >
<p>Go ahead & do a barrel roll on your site</p>
<p>Go ahead & do a barrel roll on your site</p>
<p>Share it, if you like it</p>
<p>Share it, if you like it</p>
<p>Thank you </p>
<p>Thank you </p>
</body>
</html>
Since this feature is still in development in some browsers, this may not work in older browsers.
The same effect can be achieved by entering “Z or R twice” into the search bar.
If you wanna know how i did to this site(If you have not seen it while page the loaded, just refresh the page):
Added a below javascript to add a css class “barrel-roll” to the body with the above properties after 3 secs to allow page load.
if(location.href.match(‘do-a-barrel-roll’)){ //check if URL has barrel roll text
setTimeout(“document.getElementsByTagName(‘body’)[0].className=’barrel-roll’;”,3000);
}
