CSS3 ha traído una serie de nuevas características estéticamente impresionantes. Quizás la más divertida de estas para jugar es la animación CSS, que le permite realizar muchas funciones basadas en movimiento que normalmente se delegan a JavaScript. Únase a mí en mi búsqueda épica para descubrir el uso más genial, más innovador y, lo que es más importante, nerdiest de la animación CSS en la web. ¡Empezar!
Advertencia: estas animaciones son bastante específicas del navegador, por lo que si está navegando en IE6, es el momento de dejar de ver Guardado por la campana, deshacerse de la conexión de acceso telefónico y descargar un navegador moderno.
Polaroids giratorios
Este tutorial le muestra cómo crear una increíble y animada pila de fotografías utilizando una tonelada de nuevos comandos CSS3. Hemos tenido un buen comienzo, este será difícil de superar.
Haga clic para ver la demostración
La matriz
¿Siga el conejo blanco? err, quiero decir, echa un vistazo a esta impresionante animación Matrix. No del todo fieles a la película (los personajes individuales no cambian), pero a pesar de todo son impresionantes. Viendo que The Matrix es una de las mejores películas de ciencia ficción de todos los tiempos (estoy hablando de la primera película, no de esos otros dos desastres), esta va a pasar a la cima de nuestra lista y sin duda se quedará. allí por un tiempo hasta que se pueda encontrar un competidor digno.
Haga clic para ver la demostración
Trippy Spinning Column of Fun
Esta loca animación presenta una columna giratoria formada por filas giratorias de cuadros de colores y texto. El efecto general es una locura fresca e innegablemente vertiginosa. Este es un poco demasiado robado para robar el trueno de The Matrix, el campeón permanece.
Consejo: para una mayor probabilidad de mareo por movimiento, desplácese hacia arriba y hacia abajo y mueva la cabeza hacia adelante y hacia atrás mientras mira la animación (no somos responsables de ninguna manera de cualquier hardware en ruinas que posea después de tirar su almuerzo en su escritorio).
Haga clic para ver la demostración
DJ Hero
Este tutorial combina CSS3 y jQuery para crear registros de hilatura. Usando los controles en pantalla, puede controlar la velocidad de los registros o simplemente agarrar un registro con el mouse para dejar algunos arañazos.
Tocadiscos virtuales sobre un fondo de madera vintage? Esto podría ser un gran competidor, este debate se está calentando. Adelante, haz clic en él. Sabes que quieres jugar.
Haga clic para ver la demostración
Cubo animado 3D
Éste le permite usar las teclas de flecha para controlar la rotación de un cubo 3D. Al principio pensé que era bastante aburrido, pero luego me di cuenta de que podías mantener presionadas las teclas de flecha para hacer que se asustara y que entrara en el modo turbo de muerte giratoria, que obviamente lo redimió un poco. Mega puntos de estilo por incluir a Sonic The Hedgehog también.
Haga clic para ver la demostración
Cohete espacial
Un cohete sin duda traído a usted por las maravillas de MS-Paint vuela por el cielo con una velocidad impresionante. Una especie de En realidad, parece una especie de carroza transportada por un extraño campo de fuerza rectangular con líneas de puntos. Aproximadamente a la mitad de la animación, el cohete prácticamente desaparece sin ninguna razón aparente, por lo que obviamente es un cohete invisible de alta tecnología con alto secreto con un dispositivo de camuflaje para evitar los invasores destructores Vulcanos.
No es exactamente un competidor serio. De hecho, ¿por qué te mostré esto? Y aún más pertinente, ¿existe tal cosa como un destructor Vulcano o simplemente lo inventé?
Haga clic para ver la demostración
Clima
Nieve
Hojas
Vamos a eliminar todas las cosas del tiempo de una vez, ¿vale? Donde hay animación cursi, también está la inevitable caída de nieve, hojas, lluvia, etc. No me malinterpretes, son geniales y podrían dar lugar a algunas modificaciones estacionales realmente excelentes del sitio web. Sin embargo, estas ejecuciones particulares, aunque están bien hechas, no son tan creativas con el contexto. Déjame saber si creas un sitio web que tiene granizo gigante que destruye todo el contenido de la página, ahora eso sería algo.
Haga clic para ver la demostración de nieve
Haga clic para ver la demostración de las hojas.
Flujo de corriente
Esta animación imita el flujo de cobertura de Apple utilizando una técnica híbrida CSS / jQuery como el ejemplo de DJ Hero anterior. Al imitar a Apple, este tiene un buen desempeño tanto en la categoría cool como en la nerd y también hace un gran trabajo por ser innovador (este es el único falso de Cover Flow de CSS3 que pude encontrar). Tenemos otro contendiente en nuestras manos.
Haga clic para ver la demostración
Star Wars Crawl
Eso es todo, se acabó el juego. Me gustaría agradecer a los otros participantes por jugar, pero este se lleva el premio. ¿Es la escena de apertura de la maldita Guerra de las galaxias para gritar en voz alta? en HTML y CSS (ese es el texto en vivo que estás viendo tonto). Te pregunto, ¿qué mejor uso de la animación CSS podría haber? Yo sostengo que no hay ninguno. Confía en mí, muéstrale esto a tu amigo más nerd y él se transformará mágicamente en un niño de 4 años en la mañana de Navidad.
Haga clic para ver la demostración de Epic View
(Safari + Snow Leopard Required)
Conclusión
Para aquellos de ustedes que piensan que este concurso fue manipulado, tienen razón. Inventé la idea del concurso después de encontrar el ejemplo de Star Wars solo para resaltar cuánto palideció todo lo demás en comparación. La verdadera intención del artículo es mostrarte que no hay un final para las cosas geniales que puedes construir con las características de animación relativamente simples integradas en CSS3.
Use los comentarios a continuación para hacernos saber cuál fue su favorito. Además, si conoces otros ejemplos, ¡compártelos!