3 Second Amusement: Google “Do a Barrel Roll”

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

  1. BY Alan Hardman says:

    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;
    }

  2. BY Alan Hardman says:

    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.

  3. BY Alice Hill says:

    Alan – you’re my hero!

  4. BY adam says:

    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) }
    }

  5. BY Alvin says:

    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.

    • BY Alvin says:

      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.

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>