iPadOS 13.4 cursor with Html and JS

Hello everyone, today I spent my free time building a Javascript library that allows you to see cursor like ipadOS 13.4. This took a few minutes but was funny. The library is lightweight and you can import it to your project with two lines of code. Hope you like it!

https://github.com/josesaranda/ipadOSCursor

Example:
https://codepen.io/josesaranda/pen/oNjEWwb

Motivation

It looks really good on iPadOS 13.4 and I thought it would be possible with web technologies and the answer was yes!

How it was

You only need to think how to hide normal browser cursor and then how to built yours. It was easy.

Hide browser cursor and style yours

* {
  cursor : none;
}
#ipadOSCursor {
  z-index: 9999;
  background: grey;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
  transition: opacity 0.4s;
}

Create a class to set to "highlights" elements

And how it look when cursor is hover

.highlight {
  padding: 10px;
  line-height: 10px;
  background: transparent;
  border-radius: 6px;
  display: inline-block;
  transition: all 0.2s;
  margin: 6px;
}

.highlight:hover {
  background: rgba(239, 239, 239, 0.8);
  transition: all 0.2s;
  transform: scale(1.05);
}

Create and subscribe your custom cursor to mousemove

You'll need to set cursor position to your custom cursor

  let cursorElement = document.createElement('div');
  cursorElement.id = 'ipadOSCursor';
  document.getElementsByTagName('body')[0].appendChild(cursorElement);
  document.addEventListener('mousemove', event => setPosition(cursorElement, event));

Subscribe "highlights" elements to mouseenter and mouseleave

When cursor enter inside one of your elements hide your custom cursor

let highlightElements = document.querySelectorAll('.highlight');
  highlightElements.forEach(highlightElement => {
    highlightElement.addEventListener('mouseenter',() => {
      cursorElement.style.opacity = 0;
    });
    highlightElement.addEventListener('mouseleave',() => {
      cursorElement.style.opacity = 1;
    });
  });

That's all. Hope you like it!