Определить, когда мышь покидает окно, с помощью Glio.js

Сколько раз вы заходите, чтобы закрыть вкладку и заметить модальное окно с просьбой остаться? В наши дни это кажется обычным делом, и это делается по одной причине: это работает!

Вы можете создать аналогичный эффект, используя Библиотека Glio.js, Это бесплатный JS-скрипт с открытым исходным кодом, позволяющий определять, когда курсор мыши приближается к краю или когда он покидает окно браузера.

Читайте также: Создание модального окна легко с помощью HTML5 Dialog

Это можно использовать, чтобы попытаться удержать посетителей на вашем сайте. Но его также можно использовать для создания динамических эффектов, если пользовательская мышь перемещается далеко в одну сторону экрана.

Вы найдете много таких намерение выйти Сценарии по всему Интернету, и большинство из них сложно настроить. Но это то, что делает Glio.js таким замечательным.

Это мощная библиотека, которая дает вам контроль над тем, что вы делаете с экраном. Если мышь вашего пользователя покидает браузер, вы можете отобразить модальное изображение, изменить цвет фона или вообще ничего не делать.

Он также поставляется со встроенными горячими точками, которые вы можете проверить, когда мышь пользователя приближается к любому из четырех углов экрана. Вы также можете определить метод обратного вызова и то, как близко должен находиться курсор перед запуском чего-либо.

Чтобы использовать Glio, просто скачайте копию от GitHub и установите его. Вы также можете получить копию с Bower, Npm или напрямую из CDN,

Со сценарием на своей странице вы просто добавляете одну строку кода (настраиваемую с вашими параметрами):

glio.init ( [ direction, callback ] );

Параметром направления может быть любой угол (например, «верхний левый») или «верхний», представляющий верхнюю часть экрана. Ваша функция обратного вызова – это любой код JS, который вы хотите запустить, когда мышь пользователя становится слишком близко. Другой вариант позволяет определить расстояние от точки направления, вы можете найти соответствующую информацию на GitHub,

Итак, если вы ищете простой сценарий для определения намерения выхода, Glio является обязательным ресурсом.

Читайте также: Создание модальных форм с использованием чистого CSS с модальным CSS