84

Qué son las microinteracciones web: crea la animación de Like en Twitter

7500Puntos

hace 12 días

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.

Las microinteracciones web son pequeñas animaciones para comunicar estados de una interfaz. Facilitan el viaje del usuario por nuestra app para que se sienta más familiar y fácil de usar.

Las microinteracciones bien diseñadas pueden convertirse en momentos característicos de nuestra marca para contribuir a la adopción y lealtad de nuestros clientes. Uno de los mejores ejemplos es el botón de “Me gusta” en Twitter.

Hoy en día, es difícil imaginarnos Twitter sin esta pequeña función. Y en este reto replicaremos esa emblemática microinteracción. ¡Vamos a crear el Like de Twitter con HTML, CSS y JavaScript!.

⭐️ Para crear nuestro like de Twitter, te hice un pequeño resumen ilustrado sobre las Microinteracciones basado en Microinteractions: Tiny Design Decisions, Big User Impact de Shopify:

Microinteracciones

0️⃣ Paso 0: planeación

Te propongo que realices los siguientes 5 pasos para completar el reto:

  1. Crear el contenedor principal.
  2. Hacer la animación del corazón.
  3. Ejecutar los eventos de like y dislike.
  4. Crear la card del tweet.
  5. ¡Compartir tu resultado en los comentarios!

⚠️ Recomendación
Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento. Solo de esta forma podrás convertirte en experta o experto maquetando con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

1️⃣ Paso 1: contenedor principal

El primer paso es crear una cajita en HTML y CSS con tres elementos primordiales:

  1. Un tamaño (width y height).
  2. Un cursor diferente (pointer) cuando este se encuentre sobre el corazón.
  3. Un background con el sprite del corazón de Twitter.

Con esto último me refiero a una imagen de este tipo:

Como puedes ver, es una imagen que contiene todos los “estados” por los que pasa el corazón al darle click: primero se muestra de un color gris; luego se dibujan unas burbujas y chispas alrededor; y finalmente se muestra de color rojo.

El HTML de la cajita sería algo como lo siguiente:

class="heart">div>

Y el CSS:

.heart {
  background-image: url('https://i.ibb.co/8sTbrLt/1-MTZW1-G1m-E7-LSX1-Cnh-TYe-HA.png');
  cursor: pointer;
  height: 100px;
  width: 100px;
}

El valor de 100px lo puedes modificar. Lo importante es que se muestre solamente uno de los corazones del sprite y no la imagen completa. Algo así:

2️⃣ Paso 2: realización de la animación del corazón

El sprite del corazón de Twitter tiene 29 imágenes desde el corazón gris hasta el corazón rojo:

Necesitamos mostrar una sola imagen a la vez, mostrando cada una después de la otra y haciendo el cambio muy rápidamente para generar la ilusión de movimiento. Algo así como sucede con los folioscopios (libros que contienen una serie de imágenes que varían gradualmente de una página a la siguiente, pasándolas rápidamente simulan movimiento y generan el efecto de ser imágenes animadas.

Folioscopios

Fuente de la imagen: History of Animation

Esto en CSS podemos lograrlo con la función steps(). Nos permite dividir una animación o transición en diferentes segmentos (como si pudiéramos crear cada una de las hojas del folioscopio). En nuestro caso, cada segmento sería una de las 29 imágenes del sprite.

La función steps() recibe dos parámetros: steps(, ):

  1. : es un número entero que indica la cantidad de “divisiones” que queremos realizar.
  2. : es la dirección que queremos que tome la animación, ya sea de izquierda a derecha (start) o de derecha a izquierda (end).

Con esto claro, para la animación necesistamos:

  1. Definir un nombre (animation-name): heart-beat (aquí puedes escribir cualquier nombre).
  2. Definir el tiempo que se va a demorar (animation-duration): .8s (este es un número aleatorio y puedes modificarlo dependiendo de qué tan rápida o lenta quieres la animación).
  3. Definir el número de pasos por los que queremos que pase (animation-timing-function): 28 (el total de imágenes menos 1, ya que el corazón gris ya lo estamos mostrando por defecto, así que la animación empezará desde la segunda imagen del sprite).
  4. Establecer la cantidad de veces que queremos ejecutar la animación (animation-iteration-count): 1.
  5. Establecer cómo queremos que finalice la animación (animation-fill-mode): forwards (esto nos permite finalizar la animación con el último paso de la función steps(), por lo que terminaremos con la imagen del corazoncito rojo). ❤️

Puedes utilizar cada una de las propiedades que te describí, aunque también puedes simplificarlo con la propiedad animation:

.heart-animation {
  animation: heart-beat .8ssteps(28) 1 forwards;  
}

Ahora le diremos al sprite que se mueva de izquierda a derecha con el siguiente @keyframes
:

@keyframes heart-beat {
 from { background-position: left; }
 to { background-position: right; }
}

Finalmente, si añadimos la clase heart-animation a nuestro div, tendríamos lista nuestra animación:

Microinteracciones de Twitter

3️⃣ Paso 3: ejecución del like y dislike

Si estamos en Twitter y vemos un Tweet que nos gusta, lo que debemos hacer es darle click (en desktop) o tap (en mobile) en el corazoncito. Y si queremos deshacer esa opción, debemos volver a darle click o tap en el corazón. Esto se conoce como toggle y funciona como los interruptores de nuestra casa: si los presionamos una vez, se prende la luz, pero si los presionamos una vez más, se apaga la luz.

Esto en JavaScript sería así:

const heart = document.querySelector('.heart')

heart.addEventListener('click', () => heart.classList.toggle('heart-animation'))

En la primera línea lo que hacemos es “traernos” al elemento que tiene la clase heart desde HTML a nuestro código JavaScript para poder manipularlo.

Luego le decimos a ese elemento del corazón que “escuche” todos los clicks/taps que haga el usuario (heart.addEventListener('click', ...)) y posteriormente que le añada la clase heart-animation al primer click, pero se lo removemos al segundo click (heart.classList.toggle('heart-animation')).

Like de Twitter

4️⃣ Paso 4: creación de un tweet

Ya que tenemos nuestro “like” y “dislike” de Twitter, el siguiente paso es replicar el diseño de un Tweet (no debe ser 100% exacto) y añadirle la animación que acabamos de realizar.

Aquí te muestro cómo quedó el mío:

Los íconos los saqué de https://icons8.com/icons

5️⃣ Paso 5: compartir

Te comparto mi Codepen con la animación del corazón y mi Codepen con el diseño del Tweet.

Recuerda tú también compartirnos tu resultado final en los comentarios y en Twitter con el hashtag #RetosPlatziCSS. 😉

Además, te recomiendo tomar la siguiente saga de cursos para estudiar, dominar y profundizar en las propiedades de CSS para crear animaciones web profesionales (incluyendo las que usamos en este reto para crear el like de Twitter):

Te recomiendo continuar con este otro reto de CSS en Platzi: Principios de la animación interactiva: crea las animaciones de un reproductor de música. 😉

#NuncaParesDeAprender

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

7500Puntos

hace 12 días

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

¿Existe alguna especificación para crear las fracciones de la imagen? ¿En cuanto a tamaños y distancias entre una de la otra?

3
13945Puntos

Son estos detallitos los que hacen que una página sea espectacular. ¡Muchas gracias por compartirlo!

3
6564Puntos

¡Me gustó mucho! ¡Gracias por compartirlo!

3
2250Puntos

Espectacular!! No me había percatado de ese detalle.

2
26734Puntos

¡Órale!
Una imagen divida en fracciones 🤯

Yo pensando que es un svg animado. Me abriste un panorama, otra vez ❣️

2
4532Puntos

Epa! Cuándo vi las imágenes del corazón en una sola linea me quede como OOooook! como le hará D:

2
1085Puntos

¡Tremendo dato! Tan solo imaginaba como se podía hacer, pero ya leyendo como es, me abrió un mundo para crear distintos botones

1

Muy divertidos los retos! me gusta la metodología para enseñar de la instructora

1
9901Puntos

Está genial, yo que utilizaba gifs definitivamente esto es mejor.

1
5449Puntos

Esto esta super genial, me gusto, recuerdo que estaba haciendo algo asi unas transiciones tipo libro para un sitio web y me pegue una perdida jajaja si hubiera tenido esto a la mano me habria ayudado mucho XD

1
9219Puntos

Genial me encantan tus post y hago los ejercicios por mi cuenta cada vez que hago uno Estefany 💚 muchas gracias.

PD: El código html del div no se ve bien creo es porque no lo cerraste el div o no lo colocaste bien sale incompleto si a alguien le ayuda debe quedar asi:

 <div class="heart"></div>
1
9219Puntos
8 días

Aqui esta mi resultado al hacer este ejercicio, como plus agregue la animacion de un pequeño dinosaurio con sprites de videojuegos por si gustan verlo
CodePen
GitHub