Invierte en tu educación con el precio especial

Antes:$249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

11d

17h

13m

40s

31

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

17928Puntos

hace 3 años

¡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!

Estefany
Estefany
teffcode

17928Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
69787Puntos
3 años

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
3124Puntos
3 años

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

2
28071Puntos
3 años

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

2
55830Puntos
3 años

¡A desatar la creatividad! :gre

2
7164Puntos
3 años

Excelente , voy a hacer el mío 💪

1
3173Puntos
3 años

Muy buen post, excelente contenido y enlaces.

1
69787Puntos
3 años

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