Merida Design Blog

Publicado el | Recursos / ,

Pressure.js: Trabaja con el Force y 3D Touch de Apple de manera sencilla

Pressure.js es una librería de javascript que te permite trabajar de manera sencilla con el Force y 3D Touch en dispositivos de Apple que cuentan con soporte, y así añadir funcionalidad a tu aplicación o página web y mejorar la experiencia de uso en éstos dispositivos.

La librería también te permite detectar cuando el navegador no soporta estos eventos y así poder realizar una acción alternativa.


Modo de uso

Para hacer uso de la librería solo necesitas asignarle el o los elementos que detectarán el Force o 3d Touch dependiendo del dispositivo.

// Todos los enlaces
Pressure.set('a', {});

// Elementos de jQuery
var elements = $('.button'); 
Pressure.set(elements, {});

// Lista de elementos o un solo elemento
var elements = document.querySelector('.button');
Pressure.set(elements, {});

var element = document.getElementById('myButton');
Pressure.set(element, {});

El siguiente es un ejemplo con todos los métodos disponibles.

Pressure.set('#element', {
    start: function() {
        // Se ejecuta cuando comienza el contacto
    },
    end: function() {
        // Se ejecuta cuando termina el contacto
    },
    startDeepPress: function() {
        // Se ejecuta al efectuar un "force click" / "deep press", es decir, cuando la fuerza supera el 0.5
    },
    endDeepPress: function() {
        // Se ejecuta cuando el "force click" / "deep press" termina
    },
    change: function(force, event) {
        // Se ejecuta cada vez que el valor de la presión (force) cambia
    },
    unsupported: function() {
        // Se ejecuta cuando hay un toque o click en un elemento en un navegador que no cuenta con soporte para Force o 3D touch
    }
});

Página: http://pressurejs.com



Publicaciones que pueden interesarte

    Deja un comentario

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