28

Animación de personajes con HTML y CSS - Liga de la creatividad

8743Puntos

hace un mes

Curso de Transformaciones y Transiciones en CSS
Curso de Transformaciones y Transiciones en CSS

Curso de Transformaciones y Transiciones en CSS

¡Aprende a crear transformaciones y transiciones web con CSS! Conoce las mejores propiedades para crear animaciones con CSS, descubre cómo aplicar transformaciones 2D o 3D en HTML, explora las buenas prácticas de UX y accesibilidad para implementar transiciones y optimiza el rendimiento de tu código CSS. Renueva tus aplicaciones web con animaciones de CSS y conviértete en frontend developer profesional con tu profesora Estefany Aguilar.

¡Te doy la bienvenida a un nuevo reto de CSS!

Esta vez vamos a acceder a todo tu potencial creativo para animar un personaje con HTML y CSS, y resolveremos el nuevo reto de la Liga de Creatividad de Platzi que te lleva a diseñar tu versión superpoderosa animada para cómic en 10 días.

Liga de la Creatividad

Antes de empezar:

1️⃣ La clase de Platzi que te recomiendo para realizar este reto es: Clase extra: reto Liga Creativa y,

2️⃣ Los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:

Paso 0: ¿Cuáles son los primeros pasos para animar un personaje usando CSS?

Para este reto te propongo que realices los siguientes 4 pasos:

  1. Conocer tu personaje y su historia.
  2. Crear la maquetación de tu personaje con HTML y CSS.
  3. Configurar la animación para crear una secuencia.
  4. Definir la secuencia de la animación con fotogramas.

💡 Recomendación: evita copiar y pegar el código.
Trata de transcribir cada detalle y entender muy bien su funcionamiento (Sin afán, tómate tu tiempo). Sólo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: Conocer tu personaje y su historia

Antes de comenzar, es importante tener claro cuál será tu personaje o escena a animar. Para ello puedes escudriñar entre tus series y películas favoritas (yo escogí Stranger Things de Netflix) o crear un personaje desde cero, así como nos enseña la profe Anna Graj
ales en el Curso de Construcción de Personajes en Cine y TV.

En mi caso busqué en Google “Escenas de la primera temporada de Stranger Things” y me arrojó como resultado esta página:

Stranger Things

Fuente de la imagen: Stranger Things seasons · Vulture

De allí recordé una de mis escenas favoritas: cuando la mamá de Will se comunica con él a través de luces navideñas. Así qué, traté de buscar una imagen que me pudiera dar inspiración para plasmar esta escena en HTML y CSS:

Stranger Things

Fuente de la imagen: Seventeen

Hasta aquí, ya tenemos una idea de esa escena a plasmar. Lo que sigue, es convertir esta escena de la vida real en una escena que podamos realizar en código de forma simple y sencilla (inicialmente).

Antes de pasar al siguiente ítem, aprovecho para contarte que nosotros podemos crear con HTML y CSS cosas realistas como las de esta pintura en óleo de Diana Smith. Así que, no hay límites para la construcción de nuestros personajes o escenas !

Stranger Things

Fuente de la imagen: purecss-francine

Paso 2: Crear la maquetación de tu personaje con HTML y CSS

Después de conocer nuestro personaje o escena, la idea es plasmar primero en HTML y CSS toda la maquetación para porsteriormente animar.

En mi caso quise plasmar la escena del alfabeto que escribió la mamá de Will en la pared de su sala en la temporada 1 de Stranger Things de forma simple:

Stranger Things

🧑‍💻 Aquí te comparto el código: “Holly, Jolly” Chapter 3 · Stranger Things · CodePen with animation

Ya con esto, podemos irnos al siguiente paso para animar las luces de navidad 🎄

Paso 3: Configurar la animación para crear una secuencia

Las animaciones en CSS nos permiten animar la transición entre un estilo CSS y otro. Para esto, es importante conocer cómo es la estructura que se necesita para escribir nuestras animaciones con CSS.

Las animaciones constan de dos componentes: el primero de ellos es el estilo que describe la animación CSS (como la línea 64 de este código) y el segundo, lo vemos en el siguiente paso 😉.

En Platzi, hemos creado 3 CheatSheet sobre todas las propiedades y valores para transiciones, transformaciones y animaciones con CSS para que puedas tener una visión general de lo que existe y de lo que puedes usar. Estas, las puedes encontrar en:

💡 Clase relacionada: Propiedades para crear animaciones con CSS y propiedades animables

En donde te podrás encontrar cosas como las siguientes:

Paso 4: Definir la secuencia de la animación con fotogramas

Como mencionamos anteriormente, las animaciones constan de dos componentes. Ya hablamos del primero, que es el estilo que describe la animación CSS. Y ahora es el turno para el segundo: el conjunto de fotogramas que indican el estado inicial y final, así como posibles puntos intermedios en la misma (como el código entre las líneas 67 y 77).

Teniendo en cuenta eso, la animación de nuestras luces navideñas queda de la siguiente forma:

🧑‍💻 “Holly, Jolly” Chapter 3 · Stranger Things · CodePen with animation

Muestra tus poderes y conoce a otros superhéroes

El último día del reto recibirás un link a un formulario en el que podrás subir tu producto final. Expertos de las facultades de Desarrollo y de Contenido Digital elegirán el producto más impactante para mostrarlo durante el Platzi Live.

¿Buscabas convertirte en el superhéroe que sabes que eres y ser parte de algo más grande que tú? La Liga de Creatividad Platzi te está esperando.

Tienes hasta el 28 de septiembre a medianoche (hora Colombia) para terminar tu reto. Consulta aquí el paso a tu hora local para que no pierdas la oportunidad de subirlo!

Curso de Transformaciones y Transiciones en CSS
Curso de Transformaciones y Transiciones en CSS

Curso de Transformaciones y Transiciones en CSS

¡Aprende a crear transformaciones y transiciones web con CSS! Conoce las mejores propiedades para crear animaciones con CSS, descubre cómo aplicar transformaciones 2D o 3D en HTML, explora las buenas prácticas de UX y accesibilidad para implementar transiciones y optimiza el rendimiento de tu código CSS. Renueva tus aplicaciones web con animaciones de CSS y conviértete en frontend developer profesional con tu profesora Estefany Aguilar.
Estefany
Estefany
teffcode

8743Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
29814Puntos

¡A desatar la creatividad! :gre

2
17796Puntos

Aun estoy muy involucrado en el JS Challenge, pero en cuanto termine quiero especializarme más en CSS.

2
8726Puntos

Al leer esto veo que existe la probabilidad de crear animación usando HTLM y CSS. Ya que al ver una pantalla en blanco lo ve como un lienzo en blanco del cual tu puedes diseñarlo como quieras y tu materiales para pintarlo son líneas de código.

2
1636Puntos

Súper me animare a poner a prueba la creatividad.

2
332Puntos

Excelente , voy a hacer el mío 💪

1
8726Puntos

Recuerdo cuando un profesor nos mostro que hizo un Minion de la película Mi villano favorito usando solo elementos de CSS y nos reto a hacer lo mismo creando nuestro propio personaje. Yo hice un Darth Vader

1
1763Puntos

Muy buen post, excelente contenido y enlaces.