de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Dieses 500-Byte-Javascript kann die Cursorbewegungen des Benutzers vorhersagen

Sie können einige wirklich coole Dinge mit JavaScript machen und Open-Source-Code macht die Arbeit noch einfacher.

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

Das hört sich vielleicht nach einer komplexen Idee an, ist aber relativ einfach zu implementieren. Ganz zu schweigen davon, bietet dies eine Menge Möglichkeiten für Entwickler, um einige wirklich coole Effekte wie Pre-Hover-Animationen oder dynamische Layout-Effekte zu erstellen.

Sie beginnen mit dem Targeting eines Elements auf der Seite und legen fest, wie es aussieht, wenn sich der Benutzer auf dieses Element zubewegt.

Alle Berechnungen werden im Backend mit der Premonish-Bibliothek ausgeführt, sodass Sie sich keine Gedanken über die Mathematik oder Logik dahinter machen müssen.

Stattdessen suchen Sie nach einer Möglichkeit, die Vorhersage basierend auf einem Konfidenz-Ranking des Benutzerverhaltens zu verarbeiten. Dies wird alles in JavaScript übergeben, so dass Sie Ihre eigenen Funktionen schreiben können, um das Benutzerverhalten zu behandeln .

Hier ist ein Beispielausschnitt aus der Premonish-Demo:

 premonish.onIntent (({el, confidence}) => {// el ist das erwartete DOM-Element // confidence ist ein Ergebnis von 0-1 darüber, wie zuversichtlich wir in dieser Vorhersage sind.}); 

Die onIntent() -Methode wird in Premonish eingebettet und sie wird immer dann aufgerufen, wenn die Bibliothek bemerkt, dass ein Benutzer auf ein Element zugreift.

Sie können auch eine andere Methode verwenden, onMouseMove(), die jedes Mal ausgeführt wird, wenn der Cursor X / Y-Positionen auf dem Bildschirm ändert . Auf diese Weise können Sie sehen, wie Premonish die Wahrscheinlichkeit der Nutzerabsicht berechnet.

Sie finden eine Reihe von Informationen im Haupt-GitHub Repo, die einfache Code-Snippets enthalten, um Ihnen den Einstieg zu erleichtern. Die Initialisierung erfordert nur eine Reihe von Selektoren oder DOM-Elementen, auf die abgezielt werden soll.

Wie Sie dieses Plugin tatsächlich nutzen, liegt ganz bei Ihnen. Dies soll keine vollständige Lösung sein, sondern vielmehr ein Ausgangspunkt, um Ihnen dabei zu helfen, die Absichten des Benutzers zu übernehmen und eine Erfahrung daraus zu machen.

Sehen Sie sich die Live-Demo an, um zu sehen, wie das alles funktioniert, und sehen Sie sich einen "Debug-Modus" an, in dem Sie sehen können, wie der Vorhersagealgorithmus in Echtzeit funktioniert.

Du kannst deine Gedanken auch teilen und dem Schöpfer Matthew Conlen auf seinem Twitter @mathisonian danken.

10 häufigsten Arten von Web-Entwicklern

10 häufigsten Arten von Web-Entwicklern

Wie viele Entwickler kennst du in deinem Leben? Wenn du mit einer Gruppe von ihnen arbeitest, wirst du bemerken, dass sie bestimmte Macken oder Persönlichkeiten haben, die du eigentlich zusammen gruppieren kannst, was ich mit diesem Beitrag machen werde.Entwickler haben ihre individuellen Vorlieben und arbeiten so sind sehr unterschiedlich - auch wenn sie die gleichen Jobs machen.

(Tech- und Design-Tipps)

Unauffällige Website-Symbolleisten zur Steigerung der Benutzerinteraktion

Unauffällige Website-Symbolleisten zur Steigerung der Benutzerinteraktion

Nutzerbindung ist eines der Hauptziele eines Website-Eigentümers. Sie möchten, dass Ihre Besucher abstimmen, Fragebögen ausfüllen, Formulare ausfüllen oder Ihre Website in sozialen Netzwerken usw. teilen. Gleichzeitig möchten Sie Ihre Besucher jedoch nicht mit "in your face" Pop-ups oder Call-to-Action belästigen Benachrichtigungen. Was I

(Tech- und Design-Tipps)