Отслеживаем активность пользователя на странице

30 ноября 2014 Антон Кулешов 1523 0

Сегодня мы рассмотрим способ определения активности пользователя на странице, и в этом нам поможет JavaScript библиотека ifvisible.

Реклама

Живет ifvisible на github. С примером её использования вы можете ознакомиться в материалах «демо». Там вы увидите, как страница будет реагировать на пользователя, находящегося в неактивном состоянии. Если вы перейдёте на другую вкладку, свернёте или просто не будете двигать мышью, то через 30 секунд окно изменит прозрачность. Все ваши действия на этой странице отпишутся в логах, которые там же вы сможете и увидеть.

Теперь давайте рассмотрим, как непосредственно работать с библиотекой. В начале напишем простой пример, который проверяет активность пользователя на момент загрузки страницы.

if(ifvisible.now()){
	// Делаем что-то
}

Если ваш пользователь решил перейти на другую вкладку, то это можно отследить, используя следующий код:

ifvisible.on("blur", function(){
	// Ушел со страницы
	// Делаем что-то
});

ifvisible.on("focus", function(){
	// Вернулся
	// Делаем что-то
});

Когда пользователь стал неактивен на странице, то это можно отследить таким образам:

ifvisible.on("idle", function(){
	// Пользователь не активен
	// Делаем что-то
});

ifvisible.on("wakeup", function(){
	// Проснулся
	// Делаем что-то
});

Задержка перехода в ждущий режим составляет по умолчанию 60 секунд. Это время можно изменить:

ifvisible.setIdleDuration(10);

Также всеми событиями можно управлять отдельно:

// Переведет страницу в ждущий режим
ifvisible.idle();

ifvisible.idle(function(){
	// Этот код заработает, 
	// когда страница перейдет в ждущий режим
});

// Другие методы
ifvisible.blur();
ifvisible.focus();
ifvisible.idle();
ifvisible.wakeup();

При помощи библиотеки вы можете установить свои интервалы, если пользователь перешел в неактивное состояние:

// Если страница активна, эта функция будет выполняться каждые полсекунды.
ifvisible.onEvery(0.5, function(){
	// Анимировать «лого» только,
	// когда страница активна
	animateLogo();
});

Как видите довольно полезная библиотека и удобная, а на этом у меня всё.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Видео на заднем фоне

17 августа 2015 Антон Кулешов

Как установить видео на заднем фоне сайта? На этот вопрос можно найти массу конкретных решений, а сегодня я расскажу про плагин videoBG, при помощи которого мы справимся с этой задачей в два счета. Для этого варианта нам понадобиться: сам плагин и небольшой отрезок видео (к примеру, если у вас сайт-визитка или лэндинг турагентства, то красивые волны на заднем фоне будут привлекать пользователя и ненавязчиво задерживать на ресурсе).

Эффект лупы при помощи jQuery плагина

25 сентября 2014 Антон Кулешов

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

Всплывающие подсказки на чистом CSS

16 апреля 2015 Антон Кулешов

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