Quem já digitou a expressão do a barrel roll no campo de pesquisa da Google, viu a sua tela girando em 360 graus. Este efeito foi inspirado no jogo Starfox 64.
Veja o efeito em funcionamento: do a barrel roll.Para fazer este efeito são necessárias três etapas: a primeira é a criação de um documento Html simples, exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo do a barrel roll</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- css externo: estilo basico e a classe .barrel-roll -->
<link rel="stylesheet" type="text/css" href="barrel-roll.css" />
<!-- jquery via CDN, para facilitar a manipulacao do DOM -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- script externo para manipular o DOM, atribuir a classe e remove a mesma -->
<script type="text/javascript" src="barrel-roll.js"></script>
</head>
<body>
<div>
<h1>Exemplo do a barrel roll do Google</h1>
<p>Um memo do jogo Starfox 64, que virou uma brincadeira do Google</p>
<a href="#" class="do-a-barrel-roll" title="efeito do a barrel roll">Click e veja o efeito do a barrel roll do Google</a>
</div>
</body>
</html>
A próxima etapa é criar um arquivo com o nome de barrel-rool.css, que conterá a classe .barrel-roll responsável em fazer o efeito de girar o elemento do DOM em 360 graus, exemplo:
body{
background: #eee;
font-family: Arial, Helvetica, sans-serif;
}
.do-a-barrel-roll{
color: #900;
}
/* ------- INICIO DA CLASSE RESPONSAVEL EM GIRAR O ELEMENTO EM 360 GRAUS ---*/
@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } }
@-o-keyframes roll { 100% { -o-transform: rotate(360deg); } }
@-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } }
@keyframes roll { 100% { transform: rotate(360deg); } }
.barrel-roll {
-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;
animation-name: roll;
animation-duration: 4s;
animation-iteration-count: 1;
}
/* ------- FIM DA CLASSE RESPONSAVEL EM GIRAR O ELEMENTO EM 360 GRAUS ---*/
O terceiro e último passo é a criação de um arquivo com o nome de barrel-rool.js, que será o arquivo responsável em atribuir e remover a classe .barrel-roll do elemento DOM, exemplo:
function removeBarrelRoll(){
$('body').removeClass('barrel-roll'); //remove a classe .barrel-roll do elemento body
}
$(document).ready(function(){
$('.do-a-barrel-roll').click(function(){ //ao clicar no(s) elemento(s) .do-a-barrel-roll
$('body').addClass('barrel-roll'); //adiciona a classe barrel-roll no elemento que deseja o efeito, no caso, no body
setTimeout('removeBarrelRoll()', 4000); //como o efeito demora 4 segundos devo remover a classe, do elemento, para que ao clicar novamento o efeito volte a funcionar
return false;
});
});
Observação: Se caso o efeito não funcione pode ser que você esteja utilizando um IEBurro, Oops, quero dizer uma versão do Internet Explorer inferior a versão 10, então peço em nome de todos os desenvolvedores que atualize o seu navegador para a versão 10 ou de preferência utilize outro navegador, obrigado pela compreensão.
Você pode baixar o exemplo aqui