Unterstützung von animierten Cursorn in Webanwendungen?

Question

Unterstützung von animierten Cursorn in Webanwendungen?

Gefragt el 8 de Februar, 2012: Wann wurde die Frage gestellt
34762 Ansichten: Anzahl der Besuche der Frage
3 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Unterstützen alle Webbrowser animierte Cursor?

Ich habe das Web durchsucht, um benutzerdefinierte Cursor zu meiner Webanwendung hinzuzufügen. Ich habe eine Menge von nicht animierten (.cur) und animierte (.ani) Cursor gefunden, und mit der richtigen CSS, so dass meine Anwendung benutzerdefinierte Cursor hat! Es scheint, dass die animierten Cursor in den Webbrowsern, die ich ausprobiert habe, nicht unterstützt werden, und ich habe mich gefragt, ob es irgendeine Möglichkeit gibt, animierte Cursor in meine Webanwendung zu integrieren.

Gefragt el 8 de Februar, 2012 von skcin7

Answer 1

3 Antworten

Answer 2

2voto

Jordan Eldredge Punkte 1537

Ich konnte die .ani Cursors in modernen Browsern, indem JavaScript verwendet wird, um die einzelnen Animationsbilder aus der .ani Datei und wandle sie in Daten-URIs um, die ich dann zu einer CSS-Animation zusammensetze, ähnlich der von Laura oben vorgeschlagenen Lösung.

Ich habe es als ein NPM-Modul namens ani-cursor .

Einige Einschränkungen dieses Ansatzes:

En .ani Datei muss von derselben Domäne aus bereitgestellt werden oder die richtigen CORS-Header enthalten.
Die CSS-Cursor-Animation funktioniert derzeit nicht in Safari, aber ein Fix ist gelandet Sie sollte also in der nächsten Version enthalten sein.

Ich habe auch einen Blog-Beitrag mit einigen Details zur Funktionsweise geschrieben: https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/

Beantwortet el 11 de Dezember, 2020 von Jordan Eldredge (1537 Punkte )

Answer 3

0voto

Cannicide Punkte 3769

Kein großer Browser unterstützt 2017 animierte Cursor (des Typs .ani), und ich glaube nicht, dass es Pläne gibt, sie in Zukunft hinzuzufügen. Es kann jedoch sein, dass irgendein beliebiger Browser diese Funktion unterstützt (ein nicht wirklich bekannter Browser), also sollten Sie eine Funktion hinzufügen, die den Cursor in diesen Browsern funktionieren lässt:

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

Wenn der animierte Cursor im Browser eines Benutzers nicht funktioniert, ist auf diese Weise zumindest der normale Zeigercursor aktiviert. Wenn Sie den Zeigerteil nicht hinzufügen, würden Browser ohne Unterstützung für animierte Cursor einen VÖLLIG ANDEREN Cursor laden als den, den Sie wollten. Beachten Sie auch, dass die Standard-Browser-Cursor ziemlich ätzend sind. Ich weiß, dass viele Leute die Unterstützung für animierte Cursor in den großen Browsern haben wollen, aber das wird nicht passieren, es sei denn, viele Leute machen eine Petition dafür oder so.

Mit anderen Worten: Es gibt derzeit keine Antwort auf diese Frage. Bitte kommentieren Sie, wenn sich dies ändert.

Beantwortet el 28 de April, 2017 von Cannicide (3769 Punkte )

Answer 4

0voto

amir hossieni Punkte 11

Vollständiger Code ohne 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>

Beantwortet el 26 de Oktober, 2018 von amir hossieni (11 Punkte )

Unterstützung von animierten Cursorn in Webanwendungen?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Unterstützung von animierten Cursorn in Webanwendungen?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: