Tengo el siguiente sitio que está en flash con engranajes que giran en el fondo:¿Cómo creo un engranaje rotativo con CSS3 y jQuery?
http://thedrivepartnership.com/index.html
me gustaría crear algo similar usando CSS y JavaScript - ¿Alguien sabe de algún ejemplo por ahí?
supongo que lo que podría hacer es crear un contenedor que se llena la ventana, a continuación, colocar sus engranajes en ese contenedor.
Por ejemplo, puede colocar un contenedor que contenga la animación en la parte superior del archivo con un índice z muy bajo que se ajuste a la ventana y tenga una posición fija. Colocarías tu contenido en la parte superior y fingirías que css4 acaba de salir con soporte para fondos .avi. Es una broma. 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 animación podría tener este aspecto:
#cogs {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
overflow: hidden;
z-index: -100;
}
El css animación basada funciona así, pero con diversos prefijos de proveedores:
@keyframes rotateCogOne {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
Y luego aplica la animación como sigue:
#cogOne {
animation: rotateCogOne 60s infinite linear;'
// which means...
animation: [name], [duration], [repeat], [easing]
}
Sin crear una animación dentro de un elemento canvas, creo que vas a ser bastante limitado. En particular, escalar la animación para adaptarse a diferentes resoluciones será difícil (¿Imposible?) Con estrictas CSS y html. Sin embargo, todavía puede verse bien, así que tal vez todavía satisfaga tus necesidades. Además, cuando la animación no es compatible, aún puede tener una gran variedad de engranajes en segundo plano, o simplemente recurrir a la animación basada en JavaScript.
He lanzado un basic example de cómo se puede hacer con css y html. Here it is full screen. Hay otros problemas, creo ... Esto definitivamente es incompleto ... Pero espero que sea un paso en la dirección correcta. Puede extender los mismos métodos a más engranajes para asemejarse más a su página actual.
Si tomas esta ruta (y no estoy seguro de que la recomiende), sería mejor diseñar la animación con una resolución que se vea bien en un rango de 800x600 hasta quizás 1400x100. Si tiene estadísticas, use el tamaño de ventana más común de sus usuarios.
me temo que antes de la lona-tag de HTML 5 que necesita para utilizar GIF ..
EDIT: rayar la última .. Ver: http://css-tricks.com/examples/CSS3Clock/ Esto es muy probable que ayudar.
giratoria es una transformada 2D, así que algo como:
.cog {
height: 100px; width: 100px;
transform: rotate(180deg);
animation-duration: 10s;
}
Prueba esto en Chrome. Esto es específico para los navegadores webkit, Chrome y Safari. Reemplace "-webkit" con "-moz" para Mozilla y "-o" para Opera. O simplemente elimínelo para las versiones de navegador más recientes.
.cog{
-webkit-animation-name: spin;
-webkit-animation-duration: 60000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
}
o
.cog{
animation-name: spin;
animation-duration: 60000ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
}
Usted podría utilizar font-impresionante de spinning cog icon, a menos que desee utilizar sus propias imágenes.
El icono de fuente-impresionante se puede implementar con <i class="fa fa-cog"></i> después de haber agregado la fuente-impresionante a su proyecto.
[flag] Sí, esta es una buena broma, un gran reloj de tic-tac. Pero está muy lejos de una respuesta a la pregunta del OP. –