JavaScript Library To Visualize Click / Tap Events On Screen – TouchPoint.js

Preview:

Description:

TouchPoint.js is a lightweight vanilla JavaScript library that helps you to visualize click/tap events on web & mobile page using CSS3 transitions and transforms.

It will generate an animated ripple effect as you click or tap somewhere on the web page.

Great for screencasting, screen recording, user testing and presentations.

How to use it:

Include the TouchPoint.js on your webpage.

<script src="touchpoint.js"></script>

Initialize the TouchPoint.

 TouchPoint.init(window);

Customize the TouchPoint.

// Change the kind of HTML element that TouchPoint creates.
TouchPoint.el: 'div', 
// Change the default DOM element that TouchPoint will be active over. 
TouchPoint.dom: window, 
// Additional CSS class.
TouchPoint.styleEl: '',
// Change the default color of TouchPoint. 
TouchPoint.color: '#FFF', 
// Change the opacity of the TouchPoint. 
TouchPoint.opacity: 0.8, 
// Change the initial size of the TouchPoint. 
TouchPoint.size: 20, 
// Change the final scale of the TouchPoint.
TouchPoint.scale: 8,
// Change the zIndex of the TouchPoint. 
TouchPoint.z: 9999,

Changelog:

v1.0.1 (07/30/2018)

• Incorporate animation frame into library.