CODEWITHSUNDEEP
cssweb-applicationsmouse-cursor
skcin7
skcin7

Reputation: 787

Animated cursor support in web applications?

Do any web browsers support animated cursors?

I've been searching the web to add custom cursors to my web application. I've been finding a lot of non animated (.cur) and animated (.ani) cursors, and using the correct CSS so that my application has custom cursors! It seems that the animated cursors are not supported in the web browsers I tried and I was wondering if there is any way possible to put animated cursors into my web application.

Upvotes: 16

Views: 43628

Answers (9)

Cake Princess
Cake Princess

Reputation: 217

A possible alternative: you could convert the ANI into a GIF and then have the GIF follow your (hidden) mouse cursor around.

// Have the cursor follow the mouse
$(document).mousemove(function (e) {
    $(".pointer").css({ left: e.pageX, top: e.pageY });
});
/* Hide original cursor; add whatever elements necessary */
html, input, textarea {
  cursor: none; 
}
.pointer { /* Set cursor location */
  position: absolute;
  height: 480px; top: 100px;
  width: 480px; left: 50%;
  z-index: 9999; /* Put cursor on top of everything */
  pointer-events: none; /* Make sure cursor doesn't change */
}
.pointer img { /* Set cursor size constraints if desired */
  height: 50px;
  width: auto;
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script></head>
  
<body>
  <div class="pointer">
    <img src="https://i.imgur.com/K5ufqqA.gif">
  </div>
</body>

Upvotes: -1

Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

To answer your question

Do any web browsers support animated cursors?

Yes.According to MDN, IE supports .cur and .ani formats.

As a suggestion,have you considered using an animated gif image instead?

Try this in your css

cursor: url(img/animated_cursor.gif), auto;

Upvotes: 4

Jordan Eldredge
Jordan Eldredge

Reputation: 1707

I was able to get .ani cursors rendering in modern browsers by using JavaScript to extract the individual animation frames from the .ani file and convert them to data URIs which I then compose into a CSS animation similar to the solution proposed by Laura above.

I've published it as an NPM module called ani-cursor.

Some limitations of this approach:

  1. The .ani file must be served from the same domain, or include proper CORS headers.
  2. CSS cursor animation does not currently work in Safari, but a fix has landed so it should be in the next release.

I've also written a blog post with some details about how it works: https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/

Upvotes: 3

amir hossieni
amir hossieni

Reputation: 11

Full code without bugs

<body id="body" onmousemove="showCoords(event)" onmouseout="clearCoor()">

<div id="mini_mouse">


</div>


<script src="lib/js/jquery-3.3.1.min.js"></script>

<script>

 function showCoords(event) {
    var elmnt = document.getElementById("html");
    var scrollTop = elmnt.scrollTop;

    var x = (event.clientX) - (10);
    var y = (event.clientY) - (10) + (scrollTop);
    document.getElementById("mini_mouse")
    .style = ("top: " + y + "px ;" + "left: " + 

    x + "px ;" + "
                  background-color: red; 
                  width: 20px; 
                  height: 20px; 
                  opacity: .5 ; 
                  position: absolute;   
                  z-index: 100; 
                  border-radius: 100px ; 
                  ");

}

function clearCoor() {
    document.getElementById("mini_mouse").style = "";
}

</script>

Upvotes: 0

Cannicide
Cannicide

Reputation: 4520

No major browser actually supports animated cursors (of type .ani) as of 2017, and I don't think any are really planning to add them in the future. However, some random browser may support this feature (a not really well known browser), so you should add a feature that will make the cursor work in those browsers:

body {
    cursor: url("hand-pointing.ani"), pointer;
}

This way, if the animated cursor doesn't work in a user's browser, at least the normal pointer cursor is enabled. If you don't add the pointer part, than browsers without animated cursor support would load an ENTIRELY DIFFERENT cursor from what you wanted. Also, note that the default browser cursors kind of suck. I know that many people want animated cursor support added to major browsers, but it won't happen unless lots of people petition for it or something.

In other words, there is no answer to this question right now. Please comment if this changes.

Upvotes: 0

Laura
Laura

Reputation: 191

I managed to accomplish this using CSS keyframes, animating the source image of the cursor. It works in Chrome and Safari (though it can get a little glitchy if you've got a ton of stuff running). Good enough for my personal site!

* {
  cursor: url(frame1.png), auto;
  -webkit-animation: cursor 400ms infinite;
  animation: cursor 400ms infinite;
}

@-webkit-keyframes cursor {
  0% {cursor: url(frame1.png), auto;}
  20% {cursor: url(frame2.png), auto;}
  40% {cursor: url(frame3.png), auto;}
  60% {cursor: url(frame4.png), auto;}
  80% {cursor: url(frame5.png), auto;}
  100% {cursor: url(frame6.png), auto;}
} 

@keyframes cursor {
  0% {cursor: url(frame1.png), auto;}
  20% {cursor: url(frame2.png), auto;}
  40% {cursor: url(frame3.png), auto;}
  60% {cursor: url(frame4.png), auto;}
  80% {cursor: url(frame5.png), auto;}
  100% {cursor: url(frame6.png), auto;}
}

Upvotes: 19

Gregory M
Gregory M

Reputation: 494

You can make it happen with the help of a bit of javascript:

Add to your css

#container {
   cursor   : none;
}

#cursor {
  position  : absolute;
  z-index   : 10000;
  width     : 40px;
  height    : 40px;
  background: transparent url(../images/cursor.gif) 0 0 no-repeat;
}

Then add to your js

Straight Javascript Version

// Set the offset so the the mouse pointer matches your gif's pointer
var cursorOffset = {
   left : -30
 , top  : -20
}

document.getElementById('container').addEventListener("mousemove", function (e) {
  var $cursor = document.getElementById('cursor')

  $cursor.style.left = (e.pageX - cursorOffset.left) + 'px';
  $cursor.style.top = (e.pageY - cursorOffset.top) + 'px';

}, false);

Jquery Version

$('#container').on("mousemove", function (e) {
  $('#cursor').offset({ 
     left: (e.pageX - cursorOffset.left)
   , top : (e.pageY - cursorOffset.top)
  })

});

Upvotes: 15

skcin7
skcin7

Reputation: 787

After doing some more research, I don't think it's possible at the moment. It doesn't seem that any of the browsers support animated cursors as of 2/8/2012 using the CSS cursor property. I suppose it could be done using JavaScript to repeatedly change the value of the cursor property every few frames to make it appear animated, but that may be more trouble than it is worth.

Animated cursor files .ani files do not work. All 5 major web browsers will not show the cursor. If you try some CSS like, cursor: url('animated.ani'), that cursor will not show up!

If you make the cursor an animated gif file, it only shows up on some browsers and it's temperamental, like cursor: url('animated.gif'), the cursor works in Firefox and Chrome but it is not animated, the cursor does not work at all in IE9 or Opera, and it did something really weird in the Windows version of Safari - it works but is only animated when I move the cursor vertically on the screen, and did not animate at all when the cursor was not moving or was moving horizontally. Credit to Brutallus for the idea to use an animated gif even though it did not work!

It doesn't seem that browsers support animated cursors at this time which is a shame because I really think it would add some depth to certain web applications. I don't advocate using animated cursors for most websites because they are extremely annoying, but there are some rare situations where they can be useful, such as a HTML5 game where the cursor can potentially add to the theme of the game.

Upvotes: 11

marco
marco

Reputation: 31

-->it flickers for some reason when you move the mouse in a downwards direction

It happens because the cursor goes over the animated gif (over the #mycursor image, look the code) and exits the element on which you call the function.

Upvotes: 3

Related Questions