Замена курсора Javascript

Question

Я хочу использовать анимированный курсор в JS. Пользовательские курсоры CSS не анимируются в большинстве браузеров.

Я слышал, что люди (не могу вспомнить, кто) делают это. Они скрывают обычный курсор (устанавливая прозрачный пользовательский курсор), а затем создают изображение, которое следует за курсором в JS.

У кого-нибудь есть лучшие идеи для создания анимированных курсоров? Есть ли плагин jquery, который сделает это за вас? Я помню, как читал блог, в котором говорится об этом. Кто-нибудь слышал о людях, делающих это раньше?

Спасибо.

Answer 1

Вы можете использовать прозрачный курсор, но в некоторых браузерах он будет показывать черный квадрат вместо прозрачного. Кроме того, я видел пару примеров, которые используют canvas для добавления эффектов к курсору.

Возможный пример http://jsfiddle.net/5mN9p/ заимствовано из этого вопроса Анимированная маска изображения после мыши в HTML

Все, что я добавил, было

body{cursor:none;}

или, возможно,

canvas{cursor:none;}

Это означает, что вы можете рисовать на холсте все, что хотите, по координатам мыши.

Answer 2

Вы пробовали использовать курсоры .ani? Также см. управление курсорами с помощью css . Я думаю, вы могли бы попытаться взломать это вместе, но я не понимаю, как вы собираетесь скрыть оригинальный курсор. Вам действительно нужно что-нибудь кроме широко поддерживаемой обычной функциональности?

li { cursor: text; }
a {cursor: pointer;}

Answer 3

Не пробовал, но вы должны иметь возможность создать собственное правило CSS (создайте класс, например .customcursor, установите курсор на url(/path/to/image.png), а затем в цикле setInterval() между изображениями. Затем примените в ваше тело документа.

Понятия не имею, как часто вы можете запустить это, но оно должно работать.