Javascript 500 byte ini Dapat Memprediksi Gerakan Kursor Pengguna
Anda dapat melakukan beberapa hal yang sangat keren dengan JavaScript dan kode sumber terbuka membuat pekerjaan lebih mudah.
Premonish adalah salah satu perpustakaan paling keren yang pernah saya lihat dan dibangun dengan hanya 500 byte JavaScript. Dengan plugin ini, Anda dapat mendeteksi arah pergerakan mouse pengguna dan memprediksi elemen yang akan dituju.
Ini mungkin terdengar seperti ide yang kompleks tetapi cukup mudah untuk diterapkan. Belum lagi penawaran ini a ton peluang bagi pengembang untuk membuat beberapa efek yang sangat keren seperti animasi pre-hover atau efek tata letak dinamis.
Anda mulai dengan menargetkan elemen di halaman dan mendefinisikan bagaimana tampilannya ketika pengguna bergerak menuju elemen itu.
Semua perhitungan dilakukan di backend dengan perpustakaan Premonish, jadi Anda tidak perlu khawatir tentang matematika atau logika di balik ini.
Sebaliknya, Anda mencari cara untuk melakukannya menangani prediksi berdasarkan peringkat kepercayaan perilaku pengguna. Ini semua diteruskan ke JavaScript, jadi Anda bisa menulis fungsinya sendiri menangani perilaku pengguna.
Ini sebuah contoh cuplikan dari demo Premonish:
premonish.onIntent ((el, confidence) => // el adalah elemen DOM yang diharapkan // kepercayaan adalah skor 0-1 tentang seberapa yakin kita dalam prediksi ini.);
Itu onIntent () Metode dipanggang ke dalam bahasa Premonish dan itu disebut setiap kali pemberitahuan perpustakaan pengguna bergerak menuju beberapa elemen.
Anda juga dapat menggunakan metode lain, onMouseMove (), yang berjalan setiap kali kursor mengubah posisi X / Y di layar. Dengan cara ini Anda dapat melihat bagaimana Premonish menghitung peluang niat pengguna.
Anda dapat menemukan banyak informasi di repo GitHub utama yang termasuk cuplikan kode sederhana untuk membantu Anda memulai. Inisialisasi hanya memerlukan serangkaian pemilih atau elemen DOM yang harus ditargetkan.
Bagaimana Anda benar-benar menggunakan plugin ini sepenuhnya terserah Anda. Ini tidak dimaksudkan sebagai solusi lengkap, tetapi lebih sebagai titik awal untuk membantu Anda anggap niat pengguna dan membangun pengalaman di sekitar itu.
Lihat demo langsung untuk melihat bagaimana semua ini bekerja dan untuk melihat a “mode debug” tempat Anda dapat menyaksikan bagaimana algoritma prediksi bekerja secara real time.
Anda juga dapat membagikan pemikiran Anda dan mengucapkan terima kasih kepada pencipta Matthew Conlen di Twitter-nya @mathisonian.
