javascript - Como eu crio uma engrenagem giratória com CSS3 e jQuery?

Eu tenho o seguinte site que está em Flash com engrenagens girando ao fundo:

http://thedrivepartnership.com/index.html

Eu gostaria de criar algo semelhante usando CSS e JavaScript - alguém conhece algum exemplo por aí?

Resposta #1

Suponho que o que você poderia fazer é criar um contêiner que preencha a janela, e então colocar suas engrenagens nesse contêiner.

Por exemplo, você pode colocar um contêiner contendo a animação no topo do arquivo com um z-index muito baixo que se ajusta à janela e tem posição fixa. Você colocaria seu conteúdo em cima e fingiria que o css4 acabou de sair com suporte para fundos .avi. Brincadeira. Código:

<body>
    <div id="cogs">
        // Your awesome cog pictures
    </div>
    <div id="content">
        // Your awesome content
    </div>
</body>

O CSS para o contêiner de animação pode ser assim:

#cogs {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -100;
}

A animação baseada em CSS funciona assim, mas com diferentes prefixos de fornecedores:

@keyframes rotateCogOne {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}

E então você aplica a animação assim:

#cogOne {
    animation: rotateCogOne 60s infinite linear;'
    // which means...
    animation: [name], [duration], [repeat], [easing]
}

Sem criar um script de animação dentro de um elemento canvas, eu acho que você vai ficar bem limitado. Particularmente, dimensionar a animação para se ajustar a diferentes resoluções será difícil (Impossível?) apenas com CSS e HTML. Ainda assim, pode ficar legal, então talvez ainda atenda às suas necessidades. Além disso, onde a animação não for suportada, você ainda pode ter um conjunto legal de engrenagens ao fundo, ou simplesmente recorrer a animação baseada em JavaScript.

Eu juntei um exemplo básico de como você poderia fazer isso com CSS e HTML. Aqui está em tela cheia. Acho que há outros problemas... Isto definitivamente está incompleto... Mas, espero, é um passo na direção certa. Você poderia estender os mesmos métodos para mais engrenagens para se assemelhar ainda mais à sua página atual.

Se você fosse seguir esta rota (e não tenho certeza se a recomendo), seria melhor projetar a animação em uma resolução que ficasse boa em uma faixa em torno de 800x600 até talvez 1400x100. Se você tiver estatísticas, siga pelo tamanho de janela mais comum dos seus usuários.

Resposta #2

Experimente isso no Chrome. Isso é específico para navegadores webkit, Chrome e Safari. Substitua "-webkit" por "-moz" para o Mozilla e "-o" para o Opera. Ou simplesmente remova para as versões mais recentes dos navegadores.

.cog{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 60000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
}

ou

 .cog{
    animation-name: spin;
    animation-duration: 60000ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}