Ten 500 bajtów może przewidzieć ruchy kursora użytkownika

Możesz zrobić kilka naprawdę fajnych rzeczy dzięki JavaScriptowi, a otwarty kod źródłowy sprawia, że ​​praca jest jeszcze łatwiejsza.

Premonish jest jedną z najfajniejszych bibliotek, które widziałem i jest zbudowana tylko 500 bajtów JavaScript. Dzięki tej wtyczce możesz wykryć, gdzie porusza się mysz użytkownika i przewidzieć, do którego elementu zmierzają.

Może to brzmieć jak złożony pomysł, ale jest dość łatwy do wdrożenia. Nie wspominając o tym, że oferuje tona okazja dla programistów do tworzenia naprawdę fajnych efektów, takich jak animacje przed najechaniem lub efekty dynamicznego układu.

Zaczynasz od kierowanie elementu na stronie i określenie, jak będzie wyglądać kiedy użytkownik zbliża się do tego elementu.

Wszystkie obliczenia są wykonywane na zapleczu za pomocą biblioteki Premonish, więc nie musisz się martwić o matematykę lub logikę tego.

Zamiast tego szukasz drogi obsłużyć prognozę w oparciu o ranking zaufania zachowania użytkownika. Wszystko to jest przekazywane do JavaScript, dzięki czemu możesz pisać własne funkcje obsługiwać zachowania użytkownika.

Oto przykładowy urywek z demona Premonish:

 premonish.onIntent ((el, confidence) => // el jest oczekiwanym elementem DOM // pewność jest wynikiem od 0-1 na podstawie pewności, że jesteśmy w tej prognozie.); 

The onIntent () Metoda jest pieczona w Premonish i nazywa się ją, gdy tylko biblioteka zauważy użytkownik porusza się w kierunku jakiegoś elementu.

Możesz także użyć innej metody, onMouseMove (), który działa za każdym razem kursor zmienia pozycje X / Y na ekranie. W ten sposób możesz zobaczyć, jak Premonish oblicza szanse zamiaru użytkownika.

Możesz znaleźć kilka informacji w głównym repozytorium GitHub, które zawiera proste fragmenty kodu żebyś zaczął. Inicjalizacja właśnie wymaga seria selektorów lub elementów DOM to powinno być ukierunkowane.

Sposób, w jaki faktycznie korzystasz z tej wtyczki, zależy wyłącznie od Ciebie. To nie ma być kompletne rozwiązanie, ale raczej punkt wyjścia do pomocy zakładać intencje użytkownika i zbuduj wokół tego doświadczenie.

Sprawdź demo na żywo zobaczyć, jak to wszystko działa i zobaczyć “Tryb debugowania” gdzie można zobaczyć, jak działa algorytm przewidywania w czasie rzeczywistym.

Możesz także podzielić się swoimi przemyśleniami i podziękować twórcy Matthew Conlenowi na swoim Twitterze @misonisonian.