Javascript ของขนาด 500 ไบต์นี้สามารถทำนายการย้ายเคอร์เซอร์ของผู้ใช้ได้

คุณสามารถทำสิ่งที่ยอดเยี่ยมด้วย JavaScript และรหัสโอเพนซอร์สทำให้การทำงานง่ายยิ่งขึ้น.

Premonish เป็นหนึ่งในห้องสมุดที่เจ๋งที่สุดที่ฉันเคยเห็นและมันถูกสร้างขึ้นด้วย JavaScript เพียง 500 ไบต์. ด้วยปลั๊กอินนี้คุณสามารถตรวจสอบว่าเมาส์ของผู้ใช้เลื่อนไปอยู่ที่ใดและคาดเดาว่าองค์ประกอบใดที่พวกเขากำลังมุ่งหน้าไป.

สิ่งนี้อาจฟังดูเป็นความคิดที่ซับซ้อน แต่การนำไปปฏิบัติได้ค่อนข้างง่าย ไม่ต้องพูดถึงข้อเสนอนี้ ตัน โอกาสสำหรับนักพัฒนาในการสร้างเอฟเฟกต์เจ๋ง ๆ เช่น ภาพเคลื่อนไหวก่อนวางเมาส์ หรือ เอฟเฟกต์เค้าโครงแบบไดนามิก.

คุณเริ่มต้นด้วย การกำหนดเป้าหมายองค์ประกอบ บนหน้าและ กำหนดว่ามันจะมีลักษณะ เมื่อผู้ใช้เคลื่อนไปยังองค์ประกอบนั้น.

การคำนวณทั้งหมดทำที่แบ็กเอนด์ด้วยห้องสมุด Premonish ดังนั้นคุณไม่จำเป็นต้องกังวลเกี่ยวกับคณิตศาสตร์หรือตรรกะเบื้องหลังสิ่งนี้.

คุณกำลังมองหาวิธีการแทน จัดการกับการทำนาย ขึ้นอยู่กับการจัดอันดับความเชื่อมั่นของพฤติกรรมของผู้ใช้ ทั้งหมดนี้ถูกส่งผ่านไปยัง JavaScript เพื่อให้คุณสามารถเขียนฟังก์ชั่นของคุณเอง จัดการกับพฤติกรรมของผู้ใช้.

นี่คือ ตัวอย่างข้อมูล จากการสาธิตพรีโมนิช:

 premonish.onIntent ((el, มั่นใจ) => // el เป็นองค์ประกอบ DOM ที่คาดหวัง // ความมั่นใจคือคะแนนจาก 0-1 ว่าเรามั่นใจในการทำนายนี้); 

onIntent () เมธอดถูกอบเข้าสู่ Premonish และจะถูกเรียกเมื่อใดก็ตามที่ประกาศห้องสมุด ผู้ใช้ย้ายไปยังองค์ประกอบบางอย่าง.

คุณยังสามารถใช้วิธีอื่น, OnMouseMove (), ซึ่งทำงานทุกครั้ง เคอร์เซอร์เปลี่ยนตำแหน่ง X / Y บนหน้าจอ. วิธีนี้คุณสามารถดูได้ว่า Premonish กำลังคำนวณราคาของเจตนาของผู้ใช้อย่างไร.

คุณสามารถค้นหาข้อมูลจำนวนมากได้ใน GitHub repo หลัก รวมตัวอย่างโค้ดแบบง่าย เพื่อให้คุณเริ่มต้น การเริ่มต้นเพียงต้องการ ชุดตัวเลือกหรือองค์ประกอบ DOM ที่ควรจะเป็นเป้าหมาย.

วิธีที่คุณใช้ปลั๊กอินนี้ขึ้นอยู่กับคุณโดยสิ้นเชิง นี่ไม่ได้หมายความว่าจะเป็นทางออกที่สมบูรณ์ แต่เป็นจุดเริ่มต้นที่จะช่วยคุณ ยอมรับความตั้งใจของผู้ใช้ และสร้างประสบการณ์โดยรอบ.

ตรวจสอบ การสาธิตสด เพื่อดูว่าทั้งหมดนี้ทำงานอย่างไรและดู “โหมดแก้ไขข้อบกพร่อง” ที่ซึ่งคุณสามารถดูว่าอัลกอริทึมการทำนายทำงานแบบเรียลไทม์.

นอกจากนี้คุณยังสามารถแบ่งปันความคิดของคุณและกล่าวขอบคุณผู้สร้าง Matthew Conlen บน Twitter ของเขา.