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:
Te propongo que realices los siguientes 5 pasos para completar el reto:
⚠️ 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!
El primer paso es crear una cajita en HTML y CSS con tres elementos primordiales:
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.
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(, )
:
: es un número entero que indica la cantidad de “divisiones” que queremos realizar.
: 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:
- Definir un nombre (
animation-name
): heart-beat (aquí puedes escribir cualquier nombre). - 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). - 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). - Establecer la cantidad de veces que queremos ejecutar la animación (
animation-iteration-count
): 1. - 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:
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')
).
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):
- Curso de Transformaciones y Transiciones en CSS
- Curso de Animaciones con CSS
- Curso Práctico de Maquetación y Animaciones con CSS
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
¿Existe alguna especificación para crear las fracciones de la imagen? ¿En cuanto a tamaños y distancias entre una de la otra?
Son estos detallitos los que hacen que una página sea espectacular. ¡Muchas gracias por compartirlo!
Espectacular!! No me había percatado de ese detalle.
¡Me gustó mucho! ¡Gracias por compartirlo!
Geniaaaaal !
¡Esta genial este post!. Gracias @teffcode.
Está*
¡Tremendo dato! Tan solo imaginaba como se podía hacer, pero ya leyendo como es, me abrió un mundo para crear distintos botones
Epa! Cuándo vi las imágenes del corazón en una sola linea me quede como OOooook! como le hará D:
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
¡Me gusto mucho!
Está genial, yo que utilizaba gifs definitivamente esto es mejor.
Gracias.
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>
Muy divertidos los retos! me gusta la metodología para enseñar de la instructora