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

Category: Animation , Javascript | July 30, 2018
Author: jonahvsweb
Views Total: 2,160
Official Page: Go to website
Last Update: July 30, 2018
License: MIT

Preview:

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

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.

You Might Be Interested In:


Leave a Reply