Visualizing Tap / Click Events For HTML Prototypes - dotJs

dotJs is a very small javascript plugin for creating interactive dots to visualize Tap / Click events for HTML prototypes using CSS3 transforms on mobile or desktop.

How to use it:

1. Include the jQuery dotJs plugin on your html page.

<script src="dist/js/dot.js"></script>

2. Create a container where you want to demonstrate the tap / click events.

<div id="dot">
</div>

3. Initialize the plugin.

init('mousedown', {
  id: 'dot'
});

4. CSS configuration for dot element.

.dot {
  -webkit-animation: dot 0.7s;
  animation: dot 0.7s;
}

5. CSS3 Keyframes for dot animation.

@-webkit-keyframes 
dot {  0% {
 opacity: 1;
 -webkit-transform: scale(1, 1);
 -moz-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -o-transform: scale(1, 1);
 transform: scale(1, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(4, 4);
 -moz-transform: scale(4, 4);
 -ms-transform: scale(4, 4);
 -o-transform: scale(4, 4);
 transform: scale(4, 4);
}
}

@keyframes 
dot {  0% {
 opacity: 1;
 -webkit-transform: scale(1, 1);
 -moz-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -o-transform: scale(1, 1);
 transform: scale(1, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(4, 4);
 -moz-transform: scale(4, 4);
 -ms-transform: scale(4, 4);
 -o-transform: scale(4, 4);
 transform: scale(4, 4);
}
}

6. Config the plugin.

init('mousedown', {
  id: 'dot',
  className: 'dot',
  elem: 'div',
  position: 'absolute',
  background: '#FF0000',
  width: 20,
  height: 20,
  radius: 50,
  opacity: 0,
  keypress: 17
});

---

This awesome jQuery plugin is developed by Defy-06. For more Advanced Usages, please check the demo page or visit the official website.