How does Google Do A Barrel Roll?
You might have wondered, “How did they do that?” or “Does Google use Flash?” or even “I feel the need for speed!” The answer is simple. Let me show you how they did it:
By now, you’ve probably seen Google “do a barrel roll.” If not, go to google.com and type “Do a barrel roll.” Using Internet Explorer? No tricks for you. I suggest Chrome. For everyone else, Google’s page spins in place.
You might have wondered, “How did they do that?” or “Is Google using Flash now?” or even “I feel the need… the need for speed!” The answer to the first question is simple. I’ll show you how they did it:
Google achieved this effect using a combination of HTML5, CSS, and JavaScript. These technologies allow for smooth animations and interactive features without relying on Flash.
Check Out: How To Do A Barrel Roll X2000
By leveraging modern web standards, Google ensures compatibility across various devices and browsers.
This approach not only enhances user experience but also improves performance and security. Now, let’s dive into the details and see how you can implement it too.
Step 1: Learn to Create CSS3 Animations
@-moz-keyframes roll {
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes roll {
100% {
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes roll {
100% {
-webkit-transform: rotate(360deg);
}
}Step 2: Applying Directly to the Body
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;
}
This is quite new, so we still need vendor prefixes, but the code is simple. Surprisingly, they needed very little code.
Also Read: How To Do A Barrel Roll On A Chromebook?
If it was a webkit-only app, they could do it with two lines of code using a transition. You never know, the webkit standard might become universal, making it as easy as this:
body {
transform:rotate(360deg);
transition: 4s rotate;
}One day, IE will follow the standards or become obsolete, and we will all enjoy fun features like this. Since IE doesn’t support this yet, we can’t use it everywhere. But it’s great for some fun on modern browsers.
