Advertisement
  1. Web Design
  2. Motion

Cómo agregar microinteracciones a tu sitio web rápidamente

Scroll to top
Read Time: 2 min

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

En el consejo rápido de hoy, te enseñaré cómo agregar microinteracciones a tu sitio web usando una biblioteca de JavaScript llamada micron.js. Con micron.js, puedes agregar animaciones sutiles a los elementos de tu página web sin tener que escribir los estilos tú mismo; todo se hace usando atributos de datos en tu marcado. ¡Echemos un vistazo!

Ve el screencast de micron.js

1. Obtén micron.js

Visita la página principal de micron.js y encontrarás un enlace al repositorio, además de algunos ejemplos de demostración. Para comenzar, necesitarás el archivo CSS y el archivo JavaScript, cuyos enlaces CDN tiene este aspecto:

Agrégalos a tu página tal como los ves, o si estás usando un pen de CodePen, agrega los enlaces a las pestañas CSS y JavaScript en la configuración del pen.

2. Agrega una microinteracción

Usemos un elemento de anclaje como ejemplo. Toma lo siguiente:

Al hacer clic en un elemento de anclaje como este no ocurrirá absolutamente nada. Sin embargo, al agregar un atributo de datos con el nombre data-micron, podemos añadir un poco de estilo a nuestro elemento de anclaje.

Aquí podrás ver que hemos añadido el valor shake a nuestro atributo. Este podría haber sido uno de entre un conjunto de valores, todos los cuales nos proporcionan una interacción diferente:

  • shake
  • fade
  • jelly
  • bounce
  • tada
  • groove
  • swing
  • squeeze
  • flicker
  • jerk
  • blink
  • pop

Ahora, al hacer clic en el elemento de anclaje, podrás observar una reacción visual en forma de nuestra microinteracción.

3. Ajusta la duración de la animación

Agregar otro atributo de datos nos permitirá alterar la duración de la animación:

El valor asignado está en segundos, por lo que el atributo anterior ralentizaría la animación predeterminada para que dure un segundo.

4. Ajusta la función de aceleración

Ya te estás familiarizando con esto, ¿verdad? Agreguemos otro atributo para ajustar la función de aceleración de la animación.

De nuevo, aquí está permitido el uso de un conjunto de valores familiares:

  • linear
  • ease-in
  • ease-out
  • ease-in-out

5. Crea un enlace a otro elemento

Podemos usar micron.js para trabajar con otros elementos que no sean los que están recibiendo el clic, en esta ocasión con dos atributos de datos:

En este caso decimos que el enlazado tiene el valor true, y que queremos que la animación surta efecto en un elemento con el id target.

Echa un vistazo a la demostración que aparece a continuación para ver una colección de todos estos ejemplos, incluyendo el enlazado (haz clic en el botón bound (enlazar) y observa la animación del div rojo):

Conclusión

Micron.js hace aún más cosas para las microinteracciones que lo que hemos ejemplificado en este tutorial, visita la página web, experimenta ¡y velo por ti mismo!

Aprende más

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.