3 Second Amusement: Google “Do a Barrel Roll”

barrel

We interrupt your work-day for a three second moment of fun.

Google “Do a Barrel Roll” and enjoy the show.

Bonus points to the geek who can explain how it’s done. We will feature your answer here.

 

Comments

No Responses to “3 Second Amusement: Google “Do a Barrel Roll””

November 30, 2011 at 10:08 am, Alan Hardman said:

The rotation is done differently in web browsers based on their capabilities. Most browsers use the CSS3 animation and transform methods. An example of this for Chrome and Safari is here:

@-webkit-keyframes barrelroll {
0% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
.rotateclass {
-webkit-animation: barrelroll 2s 1;
}

Reply

November 30, 2011 at 10:20 am, Alan Hardman said:

I found one problem, in the 0% line, the rotate needs to be 0deg.
I have added this ability to my web site to prove that it works. Go to http://www.alanaktion.com/ and try searching for “do a barrel roll” and if you’re using a modern browser, it works.

Reply

November 30, 2011 at 10:20 am, Alan Hardman said:

I found one problem, in the 0% line, the rotate needs to be 0deg.
I have added this ability to my web site to prove that it works. Go to http://www.alanaktion.com/ and try searching for “do a barrel roll” and if you’re using a modern browser, it works.

Reply

November 30, 2011 at 10:29 am, Alice Hill said:

Alan – you’re my hero!

Reply

November 30, 2011 at 12:27 pm, Alan Hardman said:

Thanks, I’m happy to help! My friend found this post after I’d explained to him how Google did it.

Reply

November 30, 2011 at 3:16 pm, adam said:

had it on my site for a bit

add this to body tag

-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 2;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 2;

}

make these

@-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}

@keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}

Reply

November 30, 2011 at 5:05 pm, Alvin said:

Yah, I found a problem with it, too.

When I click on the barrel, it doesn’t do a bloody thing.

How do they do it? They put up a JPEG image and it just SITS THERE. Boy, that was easy.

Tried it in three different browsers: IE8, Firefox 7 (and I thought maybe the NoScript was affecting it), and Google Chrome (which updates itself automatically, who knows what version it is).

All three, I get bupkis.

Reply

November 30, 2011 at 9:55 pm, Alvin said:

OK, I get it now.

One forgets sometimes that “google” is a verb these days.

The link on the picture is just a red herring.

Reply

Post a Comment

Your email address will not be published.