Google: "do a barrel roll"
Today I learned Googling “do a barrel roll” with quotes unleashed a special easter egg. As a kid who grew up playing the original Star Fox, I LOVE THIS, and as if to add to the geektastic love Google did it with CSS3 transitions and transforms, which makes adult me squee just as much.
Here’s how you can make your HTML “do a barrel roll” too:
First, the code that actually does the roll is CSS. Specifically, it’s CSS Level 3 transitions, which are still in draft form, so you’ll have to write them several different ways to make them work in different browsers (Unfortunately, IE users can’t see them). Here is the code I used, which works in Chrome, Safari, Firefox, and Opera.
What these lines do is add transition instructions to do a transform over 4 seconds, ease in to it, and then ease out of it. The best SCC3 transform documentation I could find is at the Mozilla Developer’s Network. The transform rotates the object 360 degrees.
<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>
Second, you may notice that the above affects any object when class=”barrel_roll” is applied. So, let’s have some fun with the <body> tag!
You could easily apply the trick with a button, like so: <button onclick="document.getElementsByTagName('body')[0].className='barrel_roll';">BARREL ROLL!</button> but it’s way more fun to make someone type it out. Here is how to use jQuery to apply it via secret phrase in a text input:
<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>
What the code above does is watch the <input> tag with the ID “search_text” for any change or key press action. When those actions happen, the value of the field is checked for ‘”do a barrel’.
Yeah, that’s cheating a little, but it replicates the Google effect with about the same timing. And when that gets triggered the event removes itself so it doesn’t get really annoying. To see the effect again, you’ll have to refresh the page.
To prove it works, I added it to the search boxes on our scrubs, country western, and hunting gear stores.
Give it a try by typing “do a barrel roll” (with quotes) in one of our store search boxes. The effect won’t work in Internet Explorer, so be sure to use Chrome, Firefox, Safari, or Opera.
Visit one of our stores and type the secret phrase in the search box — shhhhhhhh — perhaps there will be more effects to follow…
If you can’t wait for the next round of Google goodness, here’s my previous tutorial on Google’s Dancing Logo.
Leave a Comment
Trackbacks