Live Demo: View
Download and include
touchpoint.min.js in the
<head> or at the end of the
<body> (recommended) in your HTML document. There are no dependencies:
Same instructions as above, but you will need a polyfill to run in-browser. I use
babel-polyfill which can be installed on your machine by using NPM from your command line.
<script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script> <script src="touchpoint.min.js"></script>
Quick Start/How to Use
After you load the script you simply initialize TouchPoint and add an event listener to whichever DOM element you want TouchPoint to show over:
<script> TouchPoint.init(); </script>
TouchPoint is customizable. There are a number of options that you have access to to customize the look for your needs. It's important that these options be defined before you initialize TouchPoint with
TouchPoint.init(). Otherwise, your updates won't show.
Change the default color of TouchPoint. Any valid CSS color can be used.
TouchPoint.color = 'red';
Change the default DOM element that TouchPoint will be active over. Any valid selector can be used: element name, CSS class or ID. If you want TouchPoint to only show on a specific element, make sure that that element is set to
overflow: visible, otherwise TouchPoint will get clipped.
TouchPoint.dom = elementVarId;
Change the opacity of the TouchPoint. You can use any value between
TouchPoint.opacity = 0.5;
Change the final scale of the TouchPoint. This value can range from
0 and beyond.
TouchPoint.scale = 14;
Change the initial size of the TouchPoint. This value is
TouchPoint.size = 5;
Performance should not be an issue because each individual TouchPoint element is dynamically created and then automatically removed from the DOM after being used.
The animation is handled via the
requestAnimationFrame function that is available in all current browsers. This has better overall performance than using
setTimeout, which doesn't redraw consistently.
– Updated to ES6 and reintroduced quick-clicking.
– Initial Release
This is in active development.
- Reintroduce quick clicking.
- Add keyboard shortcut to enable/disable script.