How to make use of it:

To get began, include the pressure.js JavaScript file within the doc.

<script src="pressure.js"></script>

Get again a change value on all components matching the selector.

Pressure.change('#el1', function(force, event){
  console.log(force);
  // "this" is the element(s) returned by the closure
  this.style.width = (200 * force + 200) + 'px';
  this.innerHTML = force;
});

Get again a change value on ONLY components that assist Force Touch (New Mac’s).

Pressure.changeForceTouch('#el2', function(force, event){
  this.style.width = Math.max((200 * force), 200) + 'px';
  this.innerHTML = force;
});

Get again a change worth on ONLY components that assist 3D Touch.

Pressure.change('#el3', function(force, event){
  this.style.width = (200 * force + 200) + 'px';
  this.innerHTML = force;
});

This structure can be utilized in any strategy of Pressure. The failure block will return with an “error” and message displaying why the device doesn’t assist 3D Touch.

var block = {
  start: function(){
  },

  change: function(force, event){
    this.style.width = ((200 * force) + 200) + 'px';
    this.innerHTML = force;
    this.style.backgroundColor = "rgb(" + parseInt(map(force, 0, 1, 255, 0)) + ",0," + parseInt(map(force, 0, 1, 0, 255)) +")";
    this.style.color = force > 0.4 ? 'white' : 'black';
  },

  startDeepPress: function(event){
    // this is called on "force click" / "deep press", aka once the force is greater than 0.5
  },
  endDeepPress: function(){
    // this is called when the "force click" / "deep press" end
  },

  end: function(){
    this.style.width = '200px';
    this.innerHTML = 0;
    this.style.backgroundColor = 'red';
    this.style.color = 'black';
  },

  unsupported: function(){
    console.log(this);
    this.innerHTML = 'Your device / browser does not support this :(';
  }
}

Pressure.set('#el1', block);
Pressure.setForceTouch('#el2', block);
Pressure.set3DTouch('#el3', block);

function map(x, in_min, in_max, out_min, out_max) {
  return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

JavaScript Library For 3D Touch Handling, Pressure js Plugin/Github

See Demo And Download