Published By Joshua Sandoval

Twitter Facebook 3D Touch API

A new way to interact with the web.


3D Touch

Hey guys this is Joshua, and Apple just released iOS 10 a few weeks ago, and one of the more exciting things included was a 3D Touch API for web developers. 3D Touch we know, it's a gimmick, but it is a useful input method, for those spurts of inspiration where it fits. And what's cool is you can get further backwards support by using the Safari 9 "Force Touch" API.

I've prepared a little example bubble, for your amusement. Enjoy.


3D

The easiest use of the API:

(function() { var element; document.addEventListener("DOMContentLoaded", function(event) { element = document.getElementById('3DTouchElement'); element.addEventListener('touchforcechange', onTouchForceChange, false); });
function onTouchForceChange(e) { // the maximum force value of a touch event is 0-1 var forceValue = e.changedTouches[0].force; // Apply effects to your element (I'm just using transform as an example) element.style.transform = 'scale(' + (1 - forceValue) + ')'; } })();