Distorted cursor movements using HTML or JS/jQuery

Question

I'm trying to achieve a distorted or crooked mouse movement along a page (although the user is moving the mouse fine).

I don't want to seem crude, rude or mean, but i want to simulate a Parkinson's or arthritic patient trying to move a mouse across a web page.

How do i achieve this using HTML, JS/Jquery or even CSS? I even had a thought of using small grids along the page and having the mouse cursor snap to those grid edges to achieve the effect, but could not find any code relevant to this (or am i searching with the wrong keywords??)

I do not have any starting code so apologies if this may be a trouble to any of you, but I'd appreciate any help right now.

I am only looking for a browser solution, maximum browser compatibility is appreciated.

I had looked at the pointer lock demo, but it does not solve my query. I want to simulate the mouse pointer experiencing the tremor. I don't want users having to allow their browser to hide their mouse once the canvas has been clicked. The effect and experience needs to be seamless as the user needs to feel the effect without having to perform any operations. Although my usage is just about the same as the OP in the link you provided, I don't see any solutions in the thread that allow for this effect to be pulled off in a browser. — masmrdrr, Dec 11 '14 at 06:47

Roko C. Buljan · Accepted Answer · 2014-12-11T23:06:25.577

2

In your DIV, CSS-hide the cursor using cursor:none;
Create a .png Cursor image and move it (left, top) with jQ on mousemove
Randomize the .png margin-left and margin-top using a setTimeout (to make the re-positioning smooth use CSS3 transition or do it with jQ .animate()).

Note: The script cannot know if the hand is still on the mouse ;)

function rand(min, max) {return Math.random() * (max - min) + min;}

var $cursor = $('div img');

$('div').mousemove(function(e) {  
  $cursor.css({
    left: e.pageX,
    top:e.pageY
  });
}).hover(function(e){
  $cursor.toggle();
});

(function tremor(){
  $cursor.css({
      marginLeft: rand(-15,15), // arm tremor
      marginTop:  rand(-30,30)  // hand contractions
  });
  setTimeout(tremor, rand(50,100));
}());

div{
  position:absolute;
  background:#eee;
  height:100%;
  width:100%;
  cursor:none;
}

div img{
  display:none;
  position:absolute;
  transition: margin 0.2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="https://i.stack.imgur.com/KwMGA.png"></div>

edited Dec 11 '14 at 23:06

answered Dec 11 '14 at 07:28

Roko C. Buljan

196,159
39
305
313

the code works amazingly when i run the code snippet in SO. When i try it on at my end, it just shows me the grey BG and hides the pointer. What am i missing? But awesome work, just what i was looking for – masmrdrr Dec 11 '14 at 07:41
1

@masmrdrr you're missing the pointer image – Roko C. Buljan Dec 11 '14 at 08:01
I've saved the image and calling it locally, still cannot see it... Can you please revise your answer with the full HTML code please, would be very helpful.. Sorry for the trouble – masmrdrr Dec 11 '14 at 08:05
1

i've gotten it to work, didn't seem to work with the – masmrdrr Dec 11 '14 at 08:18
1

@RokoC.Buljan that was an amazingly well done example. I wish I could up-vote that answer twice. – Jason Dec 11 '14 at 17:36

Distorted cursor movements using HTML or JS/jQuery

1 Answers1