() translation by (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:
1 |
<link href="https://unpkg.com/webkul-micron@1.1.4/dist/css/micron.min.css" type="text/css" rel="stylesheet"> |
2 |
<script src="https://unpkg.com/webkul-micron@1.1.4/dist/script/micron.min.js" type="text/javascript"></script> |
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:
1 |
<a href="#" class="demo-button">Default</a> |
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.
1 |
<a href="#" class="demo-button" data-micron="shake">Default</a> |
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:
1 |
data-micron-duration="1" |
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.
1 |
data-micron-timing="linear" |
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:
1 |
data-micron-bind="true" data-micron-id="target" |
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
