Merida Design Blog

Publicado el | Recursos / ,

Hammer.js: agrega soporte para gestos a tu página o aplicación web

Hammer.js es una librería de código abierto que te permite reconocer gestos touch, de ratón y eventos de puntero. Elimina también los 300ms de retraso de los clicks haciendo que la respuesta sea inmediata brindando una experiencia más nativa en dispositivos móviles.

Gestos

Hammer.js soporta los gestos más comunes y es posible extenderlo para reconocer gestos personalizados.

  • rotate

    Rotate
  • pinch

    Pinch
  • press

    Press
  • pan

    Pan
  • tap

    Tap
  • swipe

    Swipe

Como usarlo

Para comenzar a usar esta librería en tu aplicación solo necesitas incluirla en el html (antes del código de tu aplicación) y la variable global Hammer estará disponible desde cualquier parte de tu código JS.


    ....
    <script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
    <script src="scripts.js"></script>

Una vez incluida la librería puedes capturar los eventos antes mencionados muy fácilmente.


    var myElement = document.querySelector('#myelement');
    var hammertime = new Hammer(myElement, {});
    hammertime.on('pan', function(event) {
        console.log(event);
        // Aquí el codigo para hacer algo en respuesta al **pan**
    });


Extensiones

Adicionalmente hammer.js cuenta con extensiones para integrarlo con otras librerías o frameworks.

Página: http://hammerjs.github.io



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: