Завлекающий favicon и title, если ваш сайт открыт в неактивной вкладке

Анимация favicon и title ан вкладкеВсем - привет. Сегодня статья, как говорится: "по заявкам". Речь пойдет о завлекающем favicon и title на неактивной вкладке с вашим сайтом.

Недавно я получил комментарий от одного из читателей (привет Артем) со следующим текстом:

А не могли бы вы сделать разбор вот такой штуки: на сайте __bizneschina.ru/besplkurs.html когда вкладка не активна - меняется фавикон и заголовок (тем самым завлекая), а когда жмем на вкладку то все возвращается в нормальное состояние. Думаю, будет полезная статья. Спасибо!

Расскажу чуть более подробнее, что происходит. Когда пользователь находится на сайте, то ему отображается обычный ваш фавикон и title, но когда посетитель перейдет на другую вкладку, то можно показать ему другой текст и другую иконку. Логичный вопрос: "Зачем?". Попробую ответить этой гифкой:

Анимация favicon при неактивной вкладке

Согласитесь, такая favicon привлекает намного больше внимания. Тема действительно интересная и давайте разбираться как реализовать подобный эффект на своих сайтах.

Покопавшись в интернете (и в исходном коде сайта донора), я понял, что используется jquery-плагин mfFancyTitle, который поможет решить нам поставленную задачу.

Первым делом подключим нашу фавиконку. Делается это между тегами head, например, так:

<link rel="icon" href="img/favicon.ico">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="apple-touch-icon-152x152.png" sizes="152x152" />

Теперь подключим jquery перед закрывающим тегом body, если он еще не подключен к проекту и сам скрипт:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.mfancytitle-0.4.1.min.js"></script>

Пол дела сделано, давайте инициализируем скрипт и добьемся того, что favicon будет меняться на другую картинку, попутно меняя и текст заголовка:

$.mFancyTitle({
	mftMissYou: true,
	mftMissYouTitle: 'Вернись на эту страницу', // Текст на который измениться заголовок, когда вкладка не активна
	mftMissYouFavicon: {
		'icon': 'img/fav/favicon-16x16-r.png', // Иконку которая появится, когда вкладка не активна
	}
});

Из комментария, думаю, понятно, что происходит. Теперь, переключаясь на другую вкладку, у нас изменится favicon и title.

Но WOW - эффект был в том, что favicon мигал и привлекал внимание. Давайте реализуем это и дополним наш код следующими строками:

mftFaviconBlink: [false, true], // Должен ли мигать favicon на активной и неактивной вкладке
mftTitleBlink: [false, false],   // Должен ли мигать title на активной и неактивной вкладке
mftFaviconAltIcon: {
  'visible': {
    'icon': '', 
  },
  'hidden': {
    'icon': 'img/fav/favicon-16x16-y.png' // Вторая иконка, которая будет показываться на неактивной вкладке 
  }
}

Все вместе - это выглядит так:

$.mFancyTitle({
	mftMissYou: true,
	mftMissYouTitle: 'Вернись на эту страницу', // Текст на который измениться заголовок, когда вкладка не активна
	mftMissYouFavicon: {
		'icon': 'img/fav/favicon-16x16-r.png', // Иконка которая появится, когда вкладка не активна
	},

	mftFaviconBlink: [false, true], // Должен ли мигать favicon на активной и неактивной вкладке
	mftTitleBlink: [false, false],   // Должен ли мигать title на активной и неактивной вкладке
	mftFaviconAltIcon: {
		'visible': {
			'icon': '', 
		},
		'hidden': {
			'icon': 'img/fav/favicon-16x16-y.png' // Вторая иконка, которая будет показываться на неактивной вкладке 
		}
	}
});

Теперь наши вкладки выглядят так:

Анимация title и favicon

Подробнее с настройками можно ознакомиться на странице проекта. А на сегодня - все. Вот такая интересная статья получилась. Спасибо Артем за интересную тему, которая действительно может оказаться полезной для многих людей. Напоминаю, что каждый может предложить тему для следующей статьи тут.

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 3

  1. dimadv7

    Представляю какая гирлянда будет в браузере, если все начнут применять этот подход)))

  2. Артем

    Отличная статья, все подробно описано, читать одно удовольствие. Полезный сайт, часто сижу тут, а Дима в очередной раз доказывает что он профессионал. Спасибо, Дима, я разобрался!)

    • dimadv7

      Спасибо за теплые слова и интересную тему статьи.

Добавить комментарий