Prise en charge du curseur animé dans les applications Web?

Faire toute navigateurs web pris en charge curseurs animés?

J'ai été à la recherche sur le web pour ajouter des curseurs personnalisés pour mon application web. J'ai été trouver un grand nombre de non animés (.cur) et de l'animation.ani), et en utilisant la bonne CSS afin que ma demande a curseurs personnalisés! Il semble que les curseurs animés ne sont pas pris en charge dans les navigateurs web, j'ai essayé et je me demandais si il n'y est de toute façon possible de placer des curseurs animés dans mon application web.

source d'informationauteur skcin7

  1. 13

    Vous pouvez y arriver avec l'aide d'un peu de javascript:

    Ajouter à votre css

    #container {
   cursor   : none;
}

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

    Puis l'ajouter à votre js

    Droite Version Javascript

    //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);

    La Version Jquery

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

});
  2. 9

    Après avoir fait un peu plus de recherche, je ne pense pas que c'est possible pour le moment. Il ne semble pas qu'aucun des navigateurs prennent en charge les curseurs animés du 2/8/2012 à l'aide de la CSS cursor de la propriété. Je suppose que cela pourrait être fait à l'aide de JavaScript à plusieurs reprises de modifier la valeur de la cursor bien tous les quelques images pour en faire apparaître d'animation, mais qui peut être plus d'ennuis que cela vaut la peine.

    Curseur animé fichiers .ani fichiers ne fonctionnent pas. Tous les 5 principaux navigateurs web ne sera pas afficher le curseur. Si vous essayez un peu de CSS comme, cursor: url('animated.ani')que le curseur ne se montre pas!

    Si vous faites le curseur d'un fichier gif animé, il ne s'affiche que sur certains navigateurs, et elle capricieuse, comme cursor: url('animated.gif')le curseur fonctionne dans Firefox et Chrome, mais il n'est pas animé, le curseur ne fonctionne pas du tout dans IE9 ou à l'Opéra, et il a fait quelque chose de vraiment étrange dans la version Windows de Safari, ça fonctionne, mais est uniquement une animation lorsque je déplace le curseur verticalement sur l'écran, et de ne pas les animer tout lorsque le curseur n'était pas en mouvement ou a un mouvement horizontal. Crédit à Brutallus pour l'idée d'utiliser un gif animé, même si elle ne fonctionne pas!

    Il ne semble pas que les navigateurs prennent en charge les curseurs animés en ce moment ce qui est dommage car je pense vraiment que ce serait ajouter de la profondeur à certaines applications web. Je ne défends pas l'utilisation des curseurs animés pour la plupart des sites web, car ils sont très ennuyeux, mais il existe quelques rares situations où ils peuvent être utiles, comme un HTML5 jeu où le curseur peut éventuellement ajouter à la thématique du jeu.

  3. 6

    J'ai réussi à accomplir cela en utilisant CSS les images clés, animation de la source de l'image du curseur. Il fonctionne dans Chrome et Safari (même si elle peut obtenir un petit glitch si vous avez une tonne de choses en cours d'exécution). Assez bon pour mon site personnel!

    * {
  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;}
}
  4. 3

    -->il clignote pour quelque raison quand vous déplacez la souris dans une direction vers le bas

    Cela se produit parce que le curseur passe au-dessus du gif animé (en plus de la #mycursor image, regardez le code) et les sorties de l'élément sur lequel vous appelez la fonction.

  5. 2

    Pour répondre à votre question

    Faire toute navigateurs web pris en charge curseurs animés?

    Oui.Selon MDNc'est à dire prend en charge .cur et .ani formats.

    Comme une suggestion,avez-vous envisagé d'utiliser une image gif animée à la place?

    Essayez ceci dans votre css

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

    Je tiens également à souligner que, en cas vous avez essayé d'utiliser .cur ou .ani fichiers sous IE, et vous n'avez pas obtenir le résultat que vous espériez, il est peut être un problème avec le chemin que vous avez fourni dans votre curseur url - cette blog aidera u grandement dans cet aspect.

  6. 1

    J'ai trouvé ceci, et cela semble fonctionner:http://ye5.blogspot.it/2011/01/animated-mouse-cursor-on-mozilla.html

  7. 0

    Pas de grand navigateur prend en charge les curseurs animés (de type .ani) à compter de 2017, et je ne pense pas qu'ils sont vraiment l'intention d'ajouter à l'avenir. Cependant, certains navigateur aléatoire peut prendre en charge cette fonctionnalité (pas vraiment bien connus du navigateur), si vous devez ajouter une fonctionnalité qui va faire le travail du curseur dans ces navigateurs:

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

    De cette façon, si le curseur animé ne fonctionne pas dans le navigateur d'un utilisateur, au moins une forme normale curseur est activé. Si vous n'ajoutez pas le pointeur de la partie, que les navigateurs sans curseur animé de soutien serait de charger ENTIÈREMENT un curseur DIFFÉRENT de ce que vous vouliez. Aussi, notez que le navigateur par défaut, les curseurs de sorte de le sucer. Je sais que beaucoup de gens veulent curseur animé ajout du support pour les principaux navigateurs, mais il n'arrivera pas à moins que beaucoup de gens pétition ou quelque chose.

    En d'autres termes, il n'y a pas de réponse à cette question maintenant. S'il vous plaît commentaire si cela change.