The Vibration API is an API specifically made for mobile devices as they are thankfully the only devices that have a vibrate function. The API allows developers to vibrate a device (in a pattern) for a given duration.
This plugins allow you to use the API in an easy way together with jQuery.
$("#example-one .button").vibrate(); Example One
Vibrate for 50ms on all .button in .example.one on click
Try It!
$("#example-two .button").vibrate("short"); Example Two
Vibrate for 20ms on click
Try It!
var item = $("#example-three .button");
// Either of these
item.vibrate("medium");
item.vibrate("default");
item.vibrate(50);Example Three
Vibrate for 50ms on click
Try It!
$("#example-four .button").vibrate("long"); Example Four
Vibrate for 100ms on click
Try It!
$("#example-five .button").vibrate({
duration: 2000,
trigger: "touchstart"
});Example Five
Keep vibrating whilst touching (up to 2000ms)
Try It!
$("#example-six .button").vibrate({
pattern: [20, 200, 20]
});Example Six
Vibrate twice.
Try It!
$(".example-long .button").each(function() {
$(this).vibrate(parseInt($(this).text(), 10));
});How Long is Long Enough?
If you're not sure how long the haptic feedback should be. You can experiment with various timespans. Try all of these buttons out a mobile device. Anything above 100ms seems to long for me.
$("#example-checkbox .checkbox").vibrate({
pattern: [5, 200, 20]
});Check Boxes
Another good use case is check boxes.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4