pressure
Version:
Pressure is a lightweight JavaScript library for both Force Touch and 3D Touch through a single API.
54 lines (52 loc) • 2 kB
HTML
<html>
<head>
<style>
.element {
width: 200px;
padding: 20px;
background: #0080FF;
margin-bottom: 10px;
color: white;
cursor: pointer;
}
div[id*='jquery'] {
background: #72238e;
}
h3 {
margin-top: 0;
margin-bottom: 10px;
}
img {
width: 100%;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Pressure Tests</h1>
<h3>Change Pressure</h3>
<div class="element" id="el1">0</div>
<h3>Change Pressure (target ONLY Force Touch | Mac, Magic Trackpad 2)</h3>
<div class="element" id="el2">0</div>
<h3>Change Pressure (target ONLY 3D Touch | iPhone6s, iPhone7, Apple Pencil)</h3>
<div class="element" id="el3">0</div>
<h3>Change Pressure (target ONLY <a href="https://www.w3.org/TR/pointerevents/">Pointer Events</a>)</h3>
<div class="element" id="el4">0</div>
<hr />
<h1>jQuery Pressure Tests</h1>
<h3>Change Pressure</h3>
<div class="element" id="el1-jquery">0</div>
<h3>Change Pressure (target ONLY Force Touch | Mac, Magic Trackpad 2)</h3>
<div class="element" id="el2-jquery">0</div>
<h3>Change Pressure (target ONLY 3D Touch | iPhone6s, iPhone7, Apple Pencil)</h3>
<div class="element" id="el3-jquery">0</div>
<h3>Change Pressure (target ONLY <a href="https://www.w3.org/TR/pointerevents/">Pointer Events</a>)</h3>
<div class="element" id="el4-jquery">0</div>
<img src="http://assets.climatecentral.org/images/made/12_5_14_upton_ocean_sunset_San_Diego_720_480_s_c1_c_c.jpg" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="../dist/pressure.js"></script>
<script type="text/javascript" src="../dist/jquery.pressure.js"></script>
<script type="text/javascript" src="example.js"></script>
</body>
</html>