javascript - ¿Cómo puedo crear un engranaje giratorio con CSS3 y jQuery?

Tengo el siguiente sitio que está en Flash con engranajes giratorios en el fondo:

http://thedrivepartnership.com/index.html

Me gustaría crear algo similar usando CSS y JavaScript; ¿alguien conoce algún ejemplo por ahí?

Respuesta #1

Supongo que lo que podrías hacer es crear un contenedor que llene la ventana, y luego colocar tus engranajes en ese contenedor.

Por ejemplo, podrías colocar un contenedor que contiene la animación en la parte superior del archivo con un z-index muy bajo que se ajuste a la ventana y tenga una posición fija. Colocarías tu contenido encima y fingirías que CSS4 acaba de salir con soporte para fondos .avi. Solo bromeo. Código:

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

El CSS para el contenedor de la animación podría verse así:

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

La animación basada en CSS funciona así, pero con diferentes prefijos de proveedor:

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

Y luego aplicas la animación así:

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

Sin scriptar una animación dentro de un elemento canvas, creo que vas a estar bastante limitado. En particular, escalar la animación para que se ajuste a diferentes resoluciones será difícil (¿Imposible?) con CSS y HTML estrictos. Aun así, puede verse genial, así que tal vez todavía cumpla con tus necesidades. Además, donde la animación no sea compatible, aún puedes tener un arreglo genial de engranajes en el fondo, o simplemente recurrir a la animación basada en JavaScript.

He juntado un ejemplo básico de cómo podrías hacerlo con css y html. Aquí está a pantalla completa. Creo que hay más problemas... Esto definitivamente está incompleto... Pero espero que sea un paso en la dirección correcta. Podrías extender los mismos métodos a más engranajes para parecerse más a tu página actual.

Si fueras a tomar esta ruta (y no estoy seguro de recomendarlo), sería mejor diseñar la animación a una resolución que se viera bien en un rango desde aproximadamente 800x600 hasta quizá 1400x100. Si tienes estadísticas, fíjate en el tamaño de ventana más común de tus usuarios.

Respuesta #2

Prueba esto en Chrome. Esto es específico para navegadores webkit, Chrome y Safari. Sustituye "-webkit" por "-moz" para Mozilla y por "-o" para Opera. O simplemente elimínalo para las versiones más recientes de los navegadores.

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

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