Поддержка анимированного курсора в веб-приложениях? - PullRequest
Новая
       2

Поддержка анимированного курсора в веб-приложениях?

12 голосов
/ 08 февраля 2012

Поддерживают ли какие-либо веб-браузеры анимированные курсоры?

Я искал в Интернете, чтобы добавить пользовательские курсоры в мое веб-приложение. Я нашел много не анимированных (.cur) и анимированных (.ani) курсоров и использую правильный CSS, чтобы в моем приложении были собственные курсоры! Кажется, что анимированные курсоры не поддерживаются в веб-браузерах, которые я пробовал, и мне было интересно, есть ли какой-нибудь способ добавить анимированные курсоры в мое веб-приложение.

Ответы [ 8 ]

13 голосов
/ 29 января 2014

Вы можете сделать это с помощью небольшого количества JavaScript:

Добавить в свой css 

#container {
   cursor   : none;
}

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

Затем добавьте в свой JS

Прямая версия 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);

Версия Jquery 

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

});
9 голосов
/ 09 февраля 2012

После еще нескольких исследований, я не думаю, что это возможно в данный момент.Похоже, что ни один из браузеров не поддерживает анимированные курсоры с 08.02.2012 с использованием свойства CSS cursor.Я полагаю, что это можно сделать с помощью JavaScript, чтобы несколько раз изменять значение свойства cursor каждые несколько кадров, чтобы оно выглядело анимированным, но это может доставить больше хлопот, чем оно того стоит.

Файлы анимированных курсоров .aniфайлы не работают.Все 5 основных веб-браузеров не будут отображать курсор.Если вы попробуете что-то вроде CSS, cursor: url('animated.ani'), этот курсор не будет отображаться!

Если вы сделаете курсор анимированным GIF-файлом, он появится только в некоторых браузерах и будет иметь темпераментный характер, например cursor: url('animated.gif'),курсор работает в Firefox и Chrome, но он не анимирован, курсор не работает вообще в IE9 или Opera, и он сделал что-то действительно странное в версии Safari для Windows - он работает, но анимируется, только когда я перемещаю курсор вертикальнона экране, и вообще не анимировался, когда курсор не двигался или двигался горизонтально.Благодарим Бруталлуса за идею использовать анимированный GIF, даже если он не работал!

Похоже, что браузеры не поддерживают анимированные курсоры в настоящее время, и это позор, потому что я действительно думаю, что это добавит немного глубиныдля определенных веб-приложений.Я не рекомендую использовать анимированные курсоры для большинства веб-сайтов, потому что они очень раздражают, но есть некоторые редкие ситуации, когда они могут быть полезны, например, игра HTML5, где курсор может потенциально добавить в тему игры.

8 голосов
/ 02 сентября 2016

Мне удалось сделать это, используя ключевые кадры CSS, анимируя исходное изображение курсора. Он работает в Chrome и Safari (хотя он может немного сбиться с толку, если у вас есть куча запущенного материала). Достаточно хорошо для моего личного сайта! 

* {
  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;}
}
3 голосов
/ 24 октября 2012

-> почему-то мигает при перемещении мыши вниз

Это происходит потому, что курсор переходит на анимированный GIF (поверх изображения #mycursor, посмотрите код) и выходит из элемента, для которого вы вызываете функцию.

2 голосов
/ 08 февраля 2012

Чтобы ответить на ваш вопрос

Поддерживают ли какие-либо веб-браузеры анимированные курсоры?

Да. Согласно MDN , IE поддерживает .cur иФорматы .ani.

В качестве предложения вы рассматривали возможность использования анимированного GIF-изображения вместо этого?

Попробуйте это в вашей css 

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

Я также хотел бы отметить, что вы пытались использовать файлы .cur или .ani в IE, и вы не получили ожидаемый результатВозможно, проблема в том, что вы указали путь к URL-адресу курсора - этот блог очень поможет вам в этом.

1 голос
/ 06 апреля 2013

Я нашел это, и, кажется, работает: http://ye5.blogspot.it/2011/01/animated-mouse-cursor-on-mozilla.html

0 голосов
/ 26 октября 2018

Полный код без ошибок 

<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>

0 голосов
/ 28 апреля 2017

Ни один крупный браузер на самом деле не поддерживает анимированные курсоры (типа .ani) по состоянию на 2017 год, и я не думаю, что кто-либо действительно планирует добавить их в будущем.Однако некоторые случайные браузеры могут поддерживать эту функцию (не очень известный браузер), поэтому вы должны добавить функцию, которая заставит курсор работать в этих браузерах: 

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

Таким образом, если анимированный курсорне работает в браузере пользователя, по крайней мере, включен нормальный курсор указателя.Если вы не добавите часть указателя, тогда браузеры без поддержки анимированного курсора загрузят ПОЛНОСТЬЮ РАЗЛИЧНЫЙ курсор от того, что вы хотели.Кроме того, обратите внимание, что стандартные браузерные курсоры отстой.Я знаю, что многие люди хотят, чтобы поддержка анимированных курсоров была добавлена ​​в основные браузеры, но этого не произойдет, если многие люди не попросят об этом или что-то в этом роде.

Другими словами, на данный момент нет ответа на этот вопрос.Пожалуйста, прокомментируйте, если это изменится.

...