Всем привет! Сегодня у нас на горизонте простая библиотека JavaScript - ifvisible.js , позволяющая определить, взаимодействует пользователь со страницей или нет.
Всем привет! Сегодня у нас на горизонте простая библиотека JavaScript - ifvisible.js, позволяющая определить, взаимодействует пользователь со страницей или нет.
Как всегда, в начале ссылка на материал:
ifvisible.js
Скачать исходники вы можете также там, кликнув по кнопке Download .zip.
Данная библиотека очень простая, легкая и кроссбраузерная.
Вы можете посмотреть демо и понять, как она работает. Вы увидите ползунок, который будет заполняться в течение 30 секунд. Как только вы нажмете на какую либо кнопку клавиатуры или двините мышкой, то все сбросится, и отсчет пойдет заново. Так, если вы не будете взаимодействовать со страницей 30 секунд, то она "уснет".
Теперь о том, как ее использовать. Скачайте исходники, подключите скрипт.
Дальше следует сделать проверку
// Если со страницей идет взаимодействие прямо сейчас
if( ifvisible.now() ) {
// Показать всплывающее окно
openPopUp();
}
Вы можете отследить, если пользователь перешел на другую вкладку или свернул браузер.
ifvisible.on("blur", function() {
// пример кода...
animations.pause();
});
ifvisible.on("focus", function() {
// возвращаем все анимации
animations.resume();
});
ifvisible.js может также обрабатывать активность и неактивность на странице
ifvisible.on("idle", function() {
// Остановить все трансляции
stream.pause();
});
ifvisible.on("wakeup", function() {
// Вернуть трансляцию
stream.resume();
});
Задержка перед переходом в ждущий режим 60 секунд по умолчанию, но вы можете изменить ее
ifvisible.setIdleDuration(120); // Страница перейдет в ждущий режим через 120 секунд
Вы можете обрабатывать события вручную
ifvisible.idle(); // Переведет страницу в ждущий режим
ifvisible.idle(function() {
// Этот код сработает, когда страница перейдет в ждущий режим
});
// Другие методы
ifvisible.blur();
ifvisible.focus();
ifvisible.idle();
ifvisible.wakeup();
Вы можете задавать свои умные интервалы с ifvisible.js, если пользователь неактивен или не смотрит на страницу, интервал будет автоматически останавливаться.
// Если страница активна, эта функция будет выполняться каждые полсекунды.
ifvisible.onEvery(0.5, function() {
// Анимировать лого только, когда страница активна
animateLogo();
});
Итак, это все. Как видите, очень простая и интересная библиотека, думаю, многим пригодится. Спасибо за внимание и удачи!
