Javascript 500 byte này có thể dự đoán chuyển động con trỏ của người dùng

Bạn có thể thực hiện một số điều thực sự thú vị với JavaScript và mã nguồn mở giúp công việc trở nên dễ dàng hơn.

Tiên tri là một trong những thư viện thú vị nhất tôi từng thấy và nó được xây dựng với chỉ 500 byte JavaScript. Với plugin này, bạn có thể phát hiện nơi chuột của người dùng đang di chuyển và dự đoán phần tử nào họ đang hướng tới.

Điều này nghe có vẻ như là một ý tưởng phức tạp nhưng nó khá dễ thực hiện. Chưa kể điều này cung cấp một tấn cơ hội cho các nhà phát triển để tạo ra một số hiệu ứng thực sự thú vị như hoạt hình trước khi di chuột hoặc là hiệu ứng bố trí động.

Bạn bắt đầu bằng nhắm mục tiêu một yếu tố trên trang và xác định nó sẽ trông như thế nào khi người dùng đang di chuyển về phía yếu tố đó.

Tất cả các tính toán được thực hiện trên phần phụ trợ với thư viện Premonish, vì vậy bạn không cần phải lo lắng về toán học hoặc logic đằng sau điều này.

Thay vào đó, bạn đang tìm cách để xử lý dự đoán dựa trên bảng xếp hạng độ tin cậy của hành vi người dùng. Tất cả điều này được truyền vào JavaScript, vì vậy bạn có thể viết các hàm của riêng mình vào xử lý các hành vi của người dùng.

Đây là một đoạn trích ví dụ từ bản demo Premonish:

 premonish.onIntent ((el, tự tin) => // el là yếu tố DOM dự kiến ​​// độ tin cậy là điểm từ 0-1 về mức độ tự tin của chúng tôi trong dự đoán này.); 

Các onIntent () phương thức được đưa vào Premonish và nó được gọi bất cứ khi nào thư viện thông báo một người dùng di chuyển về phía một số yếu tố.

Bạn cũng có thể sử dụng một phương pháp khác, onMouseMove (), mà chạy mỗi lần con trỏ thay đổi vị trí X / Y trên màn hình. Bằng cách này bạn có thể thấy Premonish đang tính toán tỷ lệ cược của ý định người dùng.

Bạn có thể tìm thấy một loạt thông tin trong repo GitHub chính bao gồm các đoạn mã đơn giản để giúp bạn bắt đầu. Khởi tạo chỉ cần một loạt các bộ chọn hoặc các phần tử DOM cần được nhắm mục tiêu.

Làm thế nào bạn thực sự sử dụng plugin này là hoàn toàn tùy thuộc vào bạn. Đây không phải là một giải pháp hoàn chỉnh, mà là điểm khởi đầu để giúp bạn giả định ý định của người dùng và xây dựng một kinh nghiệm xung quanh đó.

Kiểm tra bản thử trực tiếp để xem làm thế nào tất cả hoạt động và để xem một “chế độ kiểm tra sửa lỗi” nơi bạn có thể xem cách thuật toán dự đoán hoạt động trong thời gian thực.

Bạn cũng có thể chia sẻ suy nghĩ của mình và nói lời cảm ơn tới người sáng tạo Matthew Conlen trên Twitter @mathisonian của anh ấy.