HTML5 Vibration API simplified.
goodVibes.js provides an easy implementation of HTML5 Vibration API. It handles both static and dynamically added elements.
Vibration will occur by default when user clicks an element with specific attributes. Notice that there's no ghost click but response of the vibration is immediate.
Using goodVibes.js is very simple. Just add data-vibrate for your element:
<button data-vibrate="200">I'll vibrate for 200ms when clicked</button>
Then append the script anywhere on the page:
<script src="/path/to/goodVibes.js"></script>
###Intervals###
You can pass arrays for data-vibrate to provide pauses in vibration. For instance:
<button data-vibrate="[500, 200, 500]">500ms, pause for 200ms, and 500ms more</button>
###Event Listeners### You can also define the event listeners for vibration:
<button data-vibrate="50" data-vibrate-on="touchmove">50ms vibration ontouchmove</button>
###Dynamic Elements###
You can add elements dynamically with data-vibrate / data-vibrate-on and they will work as well.
###Using Parent Element to Declare Vibration### Instead of explicitly declaring vibration for every single element (e.g. on a list), it's possible to declare vibration properties to parent element. With simple CSS selector syntax, one cand define which child nodes will dispatch the event for vibration:
<ul data-vibrate="100" data-vibrate-element="li">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
To view the demo, you'll need a device that properly supports HTML5 Vibration API.
Demo can be viewed in here: TBA.