3 Second Amusement: Google “Do a Barrel Roll”

Related Jobs

Comments

1. BY Alvin says:

   | November 30, 2011

   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
   • BY Alvin says:

     | November 30, 2011

     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
2. BY adam says:

   | November 30, 2011

   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
3. BY Alice Hill says:

   | November 30, 2011

   Alan – you’re my hero!

   Reply
   • BY Alan Hardman says:

     | November 30, 2011

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

     Reply

4. Pingback: Search for a Barrel Roll | Alanaktion

5. BY Alan Hardman says:

   | November 30, 2011

   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
6. BY Alan Hardman says:

   | November 30, 2011

   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
   • BY Alan Hardman says:

     | November 30, 2011

     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