Це 500 байт Javascript може передбачити рухи курсору користувача

Ви можете зробити деякі дійсно гарні речі з JavaScript, а відкритий вихідний код робить роботу ще простішою.

Премоніш є однією з найкрутіших бібліотек, яку я бачив і з яким будується лише 500 байт JavaScript. За допомогою цього додатка можна визначити, куди рухається миша користувача, і передбачити, до якого елемента вони рухаються.

Це може звучати як складна ідея, але це досить легко реалізувати. Не кажучи вже про це тонну можливість для розробників створювати деякі дійсно класні ефекти, такі як анімації попереднього наведення або ефекти динамічного макета.

Ви починаєте націлювання на елемент на сторінці та визначення того, як він буде виглядати коли користувач рухається до цього елемента.

Усі розрахунки виконуються на сервері за допомогою бібліотеки Premonish, тому вам не потрібно турбуватися про математику або логіку, що стоїть за цим.

Замість цього ви шукаєте шлях обробляти прогноз грунтується на рейтингу достовірності поведінки користувача. Все це переходить у JavaScript, тому ви можете писати свої власні функції обробляти поведінку користувачів.

Ось такий приклад фрагменту з демонстраційної версії Premonish:

 premonish.onIntent ((el, confidence) => // el є очікуваним елементом DOM // впевненість - це оцінка від 0-1 про те, наскільки ми впевнені в цьому прогнозі.); 

The onIntent () Метод записується в Premonish, і він називається, коли бібліотека повідомляє користувач рухається до певного елемента.

Можна також використовувати інший метод, onMouseMove (), який проходить кожен раз курсор змінює позиції X / Y на екрані. Таким чином ви зможете побачити, як Premonish обчислює шанси користувача.

Ви можете знайти купу інформації в головному репо GitHub, який містить прості фрагменти коду для початку. Ініціалізація просто вимагає ряд селекторів або елементів DOM які повинні бути націлені.

Як ви насправді використовуєте цей плагін, залежить від вас. Це не є повним рішенням, а скоріше відправною точкою, щоб допомогти вам припускати намір користувача і побудувати досвід навколо цього.

Перевірте демо побачити, як це все працює і побачити a “режим налагодження” де можна спостерігати, як алгоритм прогнозування працює в режимі реального часу.

Ви також можете поділитися своїми думками і сказати подяку творцю Метью Колен на своєму Twitter @mathisonian.