HTML or JS/jQuery can create disorienting cursor behaviors

Question

HTML or JS/jQuery can create disorienting cursor behaviors

Is there a way to create a distorted or crooked mouse movement on a webpage, even though the user is moving the mouse normally?

I'm exploring ways to simulate the experience of a Parkinson's or arthritic patient trying to navigate a web page with a mouse. How can this be achieved using HTML, JS/JQuery, or CSS? One idea I had was to use small grids on the page and make the mouse cursor snap to those grid edges for the desired effect, but I haven't found any relevant code for this. Am I using the wrong keywords in my search?

I don't have any initial code to work from, so any assistance would be greatly appreciated. I'm looking for a solution that works in browsers with maximum compatibility.

javascript jquery html css

Answer 1

Answer №1

To hide the cursor in your DIV, apply the CSS property cursor:none;
Design a custom cursor image in .png format and use jQuery to move it using the coordinates (left, top) on mousemove
Randomize the positioning of the .png cursor by adjusting the margin-left and margin-top with a setTimeout. For smooth re-positioning, consider using CSS3 transition or achieve it with jQuery's .animate() method.

Note: The script cannot determine 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.sstatic.net/KwMGA.png"></div>

Answer 2

To hide the cursor in your DIV, apply the CSS property cursor:none;
Design a custom cursor image in .png format and use jQuery to move it using the coordinates (left, top) on mousemove
Randomize the positioning of the .png cursor by adjusting the margin-left and margin-top with a setTimeout. For smooth re-positioning, consider using CSS3 transition or achieve it with jQuery's .animate() method.

Note: The script cannot determine 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.sstatic.net/KwMGA.png"></div>

HTML or JS/jQuery can create disorienting cursor behaviors

Answer №1

Similar questions

Display or conceal various content within div elements using multiple buttons

How can you tell if a specific keyboard key is being pressed along with the CTRL button?

When using a master page in ASP.Net webforms, the autocomplete feature may not function correctly

Is it possible to print a document without it ever showing on the screen

Determine whether the response originates from Express or Fastify

In React, when a user clicks the back button on the browser window, ensure you pass props back to the originating component

Issue with React Toastify display not showing

The find function within $(this) is malfunctioning

Substitute the jQuery term "request.term"

Ways to stop a ng-click event on a child div controller from activating an ng-click in the parent controller?

Combining Angular subscriptions to fetch multiple data streams

Enhancing webpage styles with AngularJS

Is there a way to align an element to the right of a centered element?

Tips for creating a responsive CSS component within a q-card while adding content

In order to utilize Next.js with pkg, you must enable one of the specified parser plugins: 'flow' or 'typescript'

How to send a JavaScript variable to Flask and trigger an AJAX reload action

What is the best way to arrange an array using AngularJs or Javascript?

The Vue instance methods provide a way to access and manipulate formatted properties

Tips for creating shaped images using clip-path

Clear the cache following the service call