An iPadOS based cursor for the browser
Demo https://ipad-cursor-js.netlify.app/
- Circular cursor
- Text cursor for text content
- Drag cursor which wiggles an elements when hovering
- Fill cursor which snaps to and wraps an element, also wiggles it
npm
npm install ipad-cursor-js<body>
...stuff
<script
type="text/javascript"
src="node_modules/ipad-cursor-js"
></script>
</body>CDN
<body>
...stuff
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/ipad-cursor-js@latest/index.js"
></script>
</body>Creating the cursor
Nothing needs to be done to create a cursor, it is attached to the DOM automatically.
However to customise the cursor, you can add a <div> with id cursor to the root of your page.
e.g.
<div id="cursor" data-w="30px" data-h="30px" data-bg="white"></div>data-w - Set the width for the general cursor default: 10px
data-h - Set the height for the general cursor default: 10px
data-bg - Set the background for the cursor default: gray
Cursors
The text cursor activates when hovering over any of the following elements: p,span,h1,h2,h3,h4,textarea,input
Only text based inputs e.g.
<input type="email"/>
Set the data-cursor attribute to any element on the page to enable the fill or drag cursor
<button data-cursor="fill">Click me!</button>
<button data-cursor="drag">Click me!</button>Set data-cursor="reset" to revert to a normal cursor for that element.
- Doesn't add
mouseenterandmouseleaveevent listeners to every desireable element, this also means that aMutationObserveris not required to detect new elements added to the page and applying the necessary event listeners to them. Instead, a singlemousemoveevent listener is added to thedocumentand we find out what's underneath the cursor withdocument.elementFromPoint