ตรวจจับเมื่อเมาส์ออกจากหน้าต่างด้วย Glio.js

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

คุณสามารถสร้างเอฟเฟกต์ที่คล้ายกันได้โดยใช้ ห้องสมุด Glio.js. มันเป็นสคริปต์ JS โอเพนซอร์ซฟรีเพื่อตรวจสอบเมื่อเคอร์เซอร์เมาส์ของผู้ใช้อยู่ เข้าใกล้ขอบ หรือเมื่อมัน ออกจากหน้าต่างเบราว์เซอร์.

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

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

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

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

หากต้องการใช้ Glio เพียงดาวน์โหลดสำเนา จาก GitHub และทำการติดตั้ง คุณสามารถดึงสำเนาได้ จาก Bower, npm หรือโดยตรงจาก CDN.

ด้วยสคริปต์ในหน้าของคุณคุณเพิ่ง เพิ่มรหัสหนึ่งบรรทัดนี้ (ปรับแต่งด้วยตัวเลือกของคุณ):

 glio.init ([ทิศทางการติดต่อกลับ]); 

ทิศทาง ตัวเลือกสามารถ มุมใดก็ได้ (เช่น. “บนซ้าย”) หรือ “ด้านบน”, แทนด้านบนของหน้าจอ ฟังก์ชั่นการโทรกลับของคุณคือ สิ่งที่รหัส JS ที่คุณต้องการเรียกใช้ เมื่อเมาส์ของผู้ใช้เข้าใกล้เกินไป ตัวเลือกอื่นให้คุณกำหนด ระยะทางจากจุดทิศทาง, คุณสามารถค้นหาข้อมูลที่เกี่ยวข้องใน GitHub.

ดังนั้นหากคุณกำลังมองหาสคริปต์ง่ายๆ ตรวจจับความตั้งใจออก Glio เป็นทรัพยากรที่ต้องมี.