Cómo crear animaciones dinámicas de sitios web

Hay dos hilos principales para las animaciones en esos sitios. El primero, como con Femme Fatale Studio, utiliza los elementos de la página como base para las piezas animables. Principalmente, solo están cortando los elementos en pedazos más pequeños y dándoles algunas animaciones CSS. Luego, con JavaScript, aplican las clases cuando ocurren ciertos eventos. Eso desencadena la animación. Una vez que entiendes las animaciones CSS, las posibilidades son infinitas, y en general es indolora. Tendrá que preocuparse por cómo funciona la lógica y habrá errores, pero la barrera de entrada es sorprendentemente baja.

Para el segundo enlace, están usando Canvas para manejar una buena parte de la animación. Piense en eso como una imagen que puede actualizar con JavaScript cuando lo desee. Algunas personas tomarán fotogramas de un archivo de video y dibujarán solo las partes que cambian. Apple estaba haciendo eso para una de sus páginas hace un tiempo. Escribí un marco de JavaScript hace años (que está tan desactualizado que dudo en vincular) ArtisanJS.com. El objetivo era abstraer los elementos que desea dibujar para poder hacer cosas como animar con el tiempo como capas diferentes. Funciona, pero ahora hay otras opciones que manejan tareas mucho más grandes.

La tercera opción que podría usar sería SVG, aunque ninguno de esos sitios parece usarlo. Puede crearlos en Adobe Illustrator o Sketch y luego animar las piezas como elementos DOM. Para mí, eso es útil si tienes un personaje para animar o incluso texto / formas que requieren un movimiento menor. Debería asignar ID a cada pieza y luego animar con CSS. Cualquier cosa en profundidad se vuelve pesada en el procesamiento realmente rápido.

En general, estos conceptos no son mutuamente excluyentes y no se alejan mucho el uno del otro. Puede mezclar y combinar en un sitio sin tener que hacer mucho trabajo adicional. La animación en la web ha recorrido un largo camino.

Para la mayoría de estas cosas, puede usar HTML y CSS. Algunas de las cosas más avanzadas pueden requerir que cree imágenes, lo que puede hacer mediante programación con javascript o usando aplicaciones especiales (como Inkscape y GIMP).

CSS tiene animaciones, transiciones, formas y mucho más.