Los gestos son patrones de navegación indispensables en aplicaciones móviles donde los usuarios están acostumbrados a realizar los mismos gestos sin importar la aplicación. Por eso hoy te enseñaré a implementar navegacion por gestos con la librería hammer.js
Importar librería
Hay dos formas en las que podemos importar hammer a nuestro proyecto: usando npm o enlazando el código desde su web. Utiliza la que se ajuste mejor a tus necesidades.
NPM
1npm i hammerjs
Enlazando código
1<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
Primeros pasos
Una vez importada la librería, podemos usar el objeto Hammer y la lista de eventos que puede recibir. Lo primero es crear una nueva instancia de Hammer la cual recibirá como parámetro el elemento donde detectaremos los eventos. Ya creada la instancia, procedemos a pasar los tipos de eventos que necesitamos. Los gestos que maneja hammer son:
- Pan**:**el puntero está abajo y se mueve en la dirección permitida.
- Pinch: dos o más punteros se están moviendo hacia (acercar) o alejarse uno del otro (alejar).
- Press: el puntero está abajo durante x ms sin ningún movimiento.
- Rotate: dos o más punteros se mueven en un movimiento circular.
- Swipe: el puntero se mueve rápido (velocidad), con suficiente distancia en la dirección permitida.
- Tap: el puntero está haciendo un pequeño toque / clic.
Cada gesto tiene su lista de eventos que podrás consultar en sus respectivas páginas de documentación. Sabiendo todo lo anterior, la sintaxis para empezar sería la siguiente:
1let hammer = new Hammer(element) 2// Los eventos dentro de la lista deben separarse por espacios 3hammer.on('events list', event => { 4 // Code 5})
Ahora veamos algo práctico. Uno de los gestos más comunes en la navegación móvil es poder abrir o cerrar un menú natural con el gesto de deslizar, como se muestra en el siguiente ejemplo:
See the Pen Lateral menu with HammerJS | EDteam Blog by Juan Alexis Mora (@Jopzik) on CodePen.
Con lo que ya vimos nos damos cuenta que no es algo del otro mundo, sólo hacemos x acción detectando el swipe (deslizar) de izquierda a derecha y viceversa. Lo interesante de hammer es que nos otorga una enorme lista de propiedades a la cual le podemos sacar provecho. Si bien toda la información puede ser útil para determinadas situaciones, te dejo un ejemplo donde podrás ver la información más relevantes de los eventos.
Ejemplo:
See the Pen Hammer JS | EDteam Blog by Juan Alexis Mora (@Jopzik) on CodePen.
Puedes usar esta información para crear gestos un poco más inteligentes. Tomemos nuestro primer ejemplo, antes podíamos hacer swipe desde cualquier parte de la pantalla y se activaba el menú, ¿pero qué tal si yo no quiero eso? Fácil, utilizamos la información del objeto y creamos un validación donde sólo se podrá activar el menú en un rango de 0 a 300 y que mínimo debe hacer un recorrido de 100 y para variar, en este caso usaremos el evento pan .
See the Pen Lateral menu with validation (Hammer.js) | EDteam Blog by Juan Alexis Mora (@Jopzik) on CodePen.
Ahora queda en tu creatividad cómo puedes sacar el máximo provecho a esta librería. 🔥