Dieses 500 Byte Javascript kann die Bewegungen des Benutzers vorhersagen

Mit JavaScript können Sie einige wirklich coole Dinge tun, und Open Source Code macht die Arbeit noch einfacher.

Premonish ist eine der coolsten Bibliotheken, die ich je gesehen habe nur 500 Bytes JavaScript. Mit diesem Plugin können Sie erkennen, wohin sich die Maus des Benutzers bewegt, und vorhersagen, auf welches Element sie sich befinden.

Das hört sich vielleicht nach einer komplexen Idee an, ist aber ziemlich einfach zu implementieren. Ganz zu schweigen von diesen Angeboten a Tonne Die Gelegenheit für Entwickler, einige wirklich coole Effekte wie Animationen vor dem Hover oder dynamische Layouteffekte.

Du fängst an Targeting eines Elements auf der Seite und Definieren, wie es aussehen wird wenn sich der Benutzer auf dieses Element zu bewegt.

Alle Berechnungen werden im Backend mit der Premonish-Bibliothek durchgeführt, sodass Sie sich nicht um die Mathematik oder Logik kümmern müssen.

Stattdessen suchen Sie nach einem Weg zu handhaben die Vorhersage basierend auf einem Vertrauensgrad des Benutzerverhaltens. Dies ist alles in JavaScript übergeben, sodass Sie Ihre eigenen Funktionen schreiben können handhabt das Benutzerverhalten.

Hier ist ein Beispielausschnitt von der Premonish-Demo:

 premonish.onIntent ((el, Confidence) => // el ist das erwartete DOM-Element // Confidence ist ein Wert von 0-1 für das Vertrauen in diese Vorhersage.); 

Das onIntent () Die Methode wird in Premonish gebacken und wird aufgerufen, wenn die Bibliothek es bemerkt ein Benutzer bewegt sich auf ein Element zu.

Sie können auch eine andere Methode verwenden, onMouseMove (), das läuft jedesmal die Der Cursor ändert die X / Y-Positionen auf dem Bildschirm. Auf diese Weise können Sie sehen, wie Premonish die Chancen der Benutzerabsicht berechnet.

Eine Reihe von Informationen finden Sie im Hauptreport von GitHub enthält einfache Code-Schnipsel um dich anzufangen Initialisierung erfordert nur eine Reihe von Selektoren oder DOM-Elementen das sollte gezielt sein.

Wie Sie dieses Plugin tatsächlich verwenden, liegt ganz bei Ihnen. Dies ist keine vollständige Lösung, sondern eher ein Ausgangspunkt, um Ihnen zu helfen Benutzerabsichten annehmen und baue eine Erfahrung darum.

Besuche die Live-Demo um zu sehen, wie das alles funktioniert und a “Debug-Modus” Hier können Sie beobachten, wie der Vorhersagealgorithmus in Echtzeit funktioniert.

Sie können auch Ihre Gedanken teilen und dem Schöpfer Matthew Conlen auf seinem Twitter @ mathisonian danken.