A tiny (2.6kb minified) vanilla JavaScript library made for in-browser HTML prototyping (as part of the UX process) that visually shows where the user clicks/taps on-screen with CSS3 transitions. TouchPoint is highly customizable, mobile ready and great for screencasting, screen recording, user testing and presentations.
Live demo: codepen.io/jonahvsweb/full/bdQmpd/
Download and include touchpoint.js
or touchpoint.min.js
in the <head>
or at the end of the <body>
(recommended) in your HTML document. There are no dependencies:
<script src="touchpoint.min.js"></script>
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(window);
</script>
That's it!
Start clicking away on the page to see it in action.
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.
Default value: '#FFF'
TouchPoint.color = 'red';
Change the default color of TouchPoint. Any valid CSS color can be used.
Default value: window
TouchPoint.dom = elementVarId;
Change the kind of HTML element that TouchPoint creates.
Default value: 'div'
TouchPoint.el = 'span';
Change the opacity of the TouchPoint. You can use any value between 0
and 1
.
Default value: 0.8
TouchPoint.opacity = 0.5;
Change the final scale of the TouchPoint. This value can range from 0
and beyond.
Default value: 8
TouchPoint.scale = 14;
Change the initial size of the TouchPoint. This value is px
.
Default value: 20
TouchPoint.size = 5;
Change the zIndex of the TouchPoint. By default it's set at the highest z-index
depth possible, but you may find the need to change it based on your own prototype.
Default value: 9999
TouchPoint.z = 500;
Performance should not be an issue because each individual TouchPoint element is dynamically created and then automatically removed from the DOM after being used.
TouchPoint.js 1.0 Beta
– Initial Release
This is in active development.
If you discover any issues or have questions regarding usage, please send a message me here on GitHub, @jonahvsweb on Twitter or from my website, jonahvsweb.com.