10 ejemplos asombrosos de animación innovadora CSS3
CSS3 ha traído consigo una serie de nuevas características estéticamente impresionantes. Quizás lo más divertido de jugar es la animación CSS, que le permite realizar muchas funciones basadas en movimiento que normalmente se delegan a JavaScript. Únete a mí en mi búsqueda épica para descubrir el uso más genial, innovador y, lo que es más importante, más nerd 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 hora de dejar de ver Salvado por la campana, deshacerse de la conexión de acceso telefónico y descargar un navegador moderno.
Polaroides Giratorias
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, será difícil de superar.
Haga clic para ver la demostración
La matriz
Sigue al conejo blanco ... err quiero decir, mira esta increíble animación de Matrix. No del todo fiel a la película (los personajes individuales no cambian), pero no deja de ser impresionante. Viendo cómo 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 saltará 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 animación loca presenta una columna giratoria compuesta de filas giratorias de cuadros de colores y texto. El efecto general es increíblemente genial e indudablemente vertiginoso. Sin embargo, este está demasiado agrietado para robar el trueno de The Matrix, el campeón permanece.
Consejo: para una mayor probabilidad de mareo, 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 ningún hardware arruinado que posea después de tirar su almuerzo sobre su escritorio).
Haga clic para ver la demostración
DJ Hero
Este tutorial combina CSS3 y jQuery para crear registros giratorios. Usando los controles en pantalla, puede controlar la velocidad de los registros o simplemente tomar un registro con el mouse para colocar algunos rasguños maravillosos.
Tocadiscos virtuales sobre un fondo de madera vintage? Este podría ser un competidor bastante importante, este debate se está calentando. Adelante, haz clic en él. Sabes que quieres jugar.
Haga clic para ver la demostración
Cubo Animado 3D
Este te permite usar las teclas de flecha para controlar la rotación de un cubo 3D. Al principio pensé que era bastante flojo, pero luego me di cuenta de que podía mantener presionadas las teclas de flecha para enloquecer y entrar en el modo de muerte turbo, lo 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 a una velocidad impresionante. Más o menos ... En realidad, flota flotando, transportado por un extraño campo de fuerza rectangular con líneas punteadas. Aproximadamente a la mitad de la animación, el cohete prácticamente desaparece sin razón aparente, por lo que obviamente es un cohete sigiloso de alta tecnología de alto secreto con un dispositivo de ocultación armado para alejar a los destructores invasores Vulcan.
No es exactamente un competidor serio. De hecho, ¿por qué te mostré esto? Y aún más pertinente, ¿existe un destructor vulcano o simplemente lo inventé?
Haga clic para ver la demostración
Clima
Nieve
Hojas
Eliminemos todas las cosas del clima de una vez, ¿de acuerdo? Donde hay animación cursi, también está la inevitable caída de nieve, hojas, lluvia, etc. No me malinterpreten, estos son bastante geniales y podrían conducir a algunas modificaciones estacionales del sitio web realmente excelentes. Sin embargo, estas ejecuciones particulares, aunque bien hechas, no son tan creativas con el contexto. Avíseme si crea un sitio web que tenga granizos gigantes que destruyan 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 hojas
Flujo de corriente
Esta animación imita el flujo de cobertura de Apple usando una técnica híbrida CSS / jQuery como el ejemplo de DJ Hero anterior. Al imitar a Apple, este se desempeña bien tanto en las categorías geniales como nerd, y también hace un gran trabajo al ser innovador (este es el único falso de CSS3 Cover Flow que pude encontrar). Tenemos otro competidor 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 Star Wars 'Star Wars' por gritar en voz alta ... en HTML y CSS (es un texto en vivo que estás mirando tonto). Te pregunto, ¿qué mejor uso de animación CSS podría haber? Declaro que no hay ninguno. Confía en mí, muéstrale esto a tu amigo más nerd y mágicamente se transformará en un niño de 4 años en la mañana de Navidad.
Haga clic en la demostración de Epic View
(Se requiere Safari + Snow Leopard)
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 destacar cuánto palideció todo lo demás en comparación. La intención real del artículo es mostrarle que las cosas geniales que puede construir con las funciones de animación relativamente simples integradas en CSS3 no tienen fin.
Use los comentarios a continuación para hacernos saber cuál fue su favorito. Además, si conoce otros ejemplos, ¡compártalos!
