Détecter quand une souris quitte la fenêtre avec Glio.js

Combien de fois allez-vous fermer un onglet et remarquez un fenêtre modale vous demandant de rester? Cela semble banal de nos jours et c’est fait pour une raison: ça marche!

Vous pouvez créer un effet similaire en utilisant le Bibliothèque Glio.js. C’est un script JS open-source gratuit permettant de détecter quand le curseur de la souris de l’utilisateur est se rapprocher du bord ou quand il quitte la fenêtre du navigateur.

Cela peut être utilisé pour essayer garder les visiteurs sur votre site. Mais, il peut aussi être utilisé pour créer des effets dynamiques si la souris de l'utilisateur se trouve loin d'un côté de l'écran.

Vous trouverez beaucoup de ces scripts d'intention de sortie partout sur le web et la plupart d'entre eux sont difficile à personnaliser. Mais c'est ce qui rend Glio.js aussi génial.

C'est une puissante bibliothèque qui vous donne le contrôle sur ce que vous faites avec l'écran. Si la souris de votre utilisateur quitte le navigateur, vous pouvez afficher un modal, ou changer la couleur de fond, ou ne rien faire.

Il vient aussi avec points chauds intégrés que vous pouvez vérifier chaque fois que la souris de l'utilisateur se rapproche de l'un des quatre coins de l'écran. Vous pouvez également définir la méthode de rappel et à quel point le curseur devrait se rapprocher avant d'exécuter quoi que ce soit.

Pour utiliser Glio, il suffit de télécharger une copie de GitHub et l'obtenir installé. Vous pouvez aussi en tirer une copie depuis Bower, npm ou directement depuis un CDN.

Avec le script dans votre page, vous venez ajoute cette ligne de code (personnalisé avec vos options):

 glio.init ([direction, rappel]); 

le direction option peut être n'importe quel coin (par exemple. “en haut à gauche”) ou “Haut”, représentant le haut de l'écran. Votre fonction de rappel est quel que soit le code JS que vous voulez exécuter lorsque la souris de l'utilisateur devient trop proche. Autre option vous permet de définir le distance du point de direction, vous pouvez trouver les informations sur GitHub.

Donc, si vous cherchez un script simple pour détecter l'intention de sortie Glio est une ressource indispensable.