Javascript 500 bytes ini boleh meramalkan Pergerakan Kursor Pengguna

Anda boleh melakukan beberapa perkara yang sangat keren dengan JavaScript dan kod sumber terbuka menjadikan kerja lebih mudah.

Bersemangat adalah salah satu perpustakaan yang paling keren yang saya lihat dan dibina dengannya hanya 500 bait JavaScript. Dengan plugin ini, anda boleh mengesan di mana tetikus pengguna bergerak dan meramalkan unsur mana yang mereka menuju ke arah.

Ini mungkin kelihatan seperti idea yang rumit tetapi ia agak mudah dilaksanakan. Belum lagi ini menawarkan a tan peluang bagi pemaju untuk mencipta beberapa kesan yang sangat baik seperti animasi pra-hover atau kesan susun atur dinamik.

Anda bermula menyasarkan unsur pada halaman dan menentukan cara ia akan kelihatan apabila pengguna bergerak ke arah elemen tersebut.

Semua pengiraan dilakukan pada backend dengan perpustakaan Premonish, jadi anda tidak perlu bimbang tentang matematik atau logik di belakang ini..

Sebaliknya, anda sedang mencari jalan mengendalikan ramalan berdasarkan kedudukan keyakinan terhadap tingkah laku pengguna. Ini semua diluluskan ke JavaScript, jadi anda boleh menulis fungsi anda sendiri mengendalikan tingkah laku pengguna.

Inilah satu coretan contoh dari demo Premonish:

 premonish.onIntent ((el, confidence) => // el adalah elemen DOM dijangka // keyakinan adalah skor dari 0-1 pada bagaimana yakin kita berada dalam ramalan ini; 

The onIntent () kaedah dibakar ke dalam Premonish dan ia dipanggil apabila notis perpustakaan pengguna yang bergerak ke arah beberapa elemen.

Anda juga boleh menggunakan kaedah lain, onMouseMove (), yang berjalan setiap masa kursor menukar kedudukan X / Y pada skrin. Dengan cara ini, anda dapat melihat bagaimana Premonish menghitung kemungkinan niat pengguna.

Anda boleh mencari sekumpulan maklumat dalam repo utama GitHub yang termasuk coretan kod ringkas untuk memulakan anda. Inisialisasi hanya memerlukan satu siri pemilih atau elemen DOM yang sepatutnya disasarkan.

Bagaimana sebenarnya anda menggunakan plugin ini sepenuhnya kepada anda. Ini bukanlah satu penyelesaian yang lengkap, melainkan satu titik permulaan untuk membantu anda menganggap niat pengguna dan membina pengalaman di sekelilingnya.

Semak demo hidup untuk melihat bagaimana semua ini berfungsi dan untuk melihat a “mod debug” di mana anda boleh melihat bagaimana algoritma ramalan berfungsi dalam masa nyata.

Anda juga boleh berkongsi pemikiran anda dan mengucapkan terima kasih kepada pencipta Matthew Conlen di Twitter @mathisoniannya.