JSFiddle - React, Tailwind, and code Playground
HTML
<main>
<p>
Once you have successfully clicked the button it will move! Attempts: <span id="misses">0</span>, successful clicks: <span id="successes">0</span>
</p>
<button>Hi!</button>
<img src="http://i.stack.imgur.com/KwMGA.png" alt="" aria-hidden="true" role="presentation">
</main>
CSS
* { cursor: none !important; }
body{
min-width: 450px;
min-height: 500px;
}
button{
margin-top: 200px;
margin-left: 200px;
}
/* .overlay{
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor:none;
}*/
img{
display:block;
position:absolute;
transition: margin 0.2s;
pointer-events: none;
}
JavaScript
var simulateTremor = function (config) {
var priv = {};
var pub = {};
var vals = {};
config = config || {};
vals.cursor = document.querySelector('img');
vals.realX = 0;
vals.realY = 0;
vals.adjustedX = 0;
vals.adjustedY = 0;
vals.tremor = config.tremor || 20;
vals.tremorSpeed = config.tremorSpeed || 50;
vals.tremorRange = config.tremorRange || 2;
priv.click = function (e)
{
e.stopPropagation();
e.preventDefault();
var x1 = Math.round(vals.realX + vals.adjustedX, 0);
var y1 = Math.round(vals.realY + vals.adjustedY, 0);
var ev = new MouseEvent('click', {
'view': window,
'bubbles': false,
'cancelable': true,
'screenX': x1,
'screenY': y1
});
//
var el = document.elementFromPoint(x1, y1);
//
el.dispatchEvent(ev);
return false;
}
priv.rand = function(min, max) {
return Math.random() * (max - min) + min;
}
priv.initMouseMove = function(){
document.addEventListener('mousemove', priv.moveMouse);
}
priv.initMouseClick = function(){
document.addEventListener('click', function(e){
priv.click(e);
});
}
priv.moveMouse = function(e){
vals.realX = e.pageX;
...