Всем - привет. Сегодня статья, как говорится: "по заявкам". Речь пойдет о завлекающем favicon и title на неактивной вкладке с вашим сайтом.
Недавно я получил комментарий от одного из читателей (привет Артем) со следующим текстом:
А не могли бы вы сделать разбор вот такой штуки: на сайте __bizneschina.ru/besplkurs.html когда вкладка не активна - меняется фавикон и заголовок (тем самым завлекая), а когда жмем на вкладку то все возвращается в нормальное состояние. Думаю, будет полезная статья. Спасибо!
Расскажу чуть более подробнее, что происходит. Когда пользователь находится на сайте, то ему отображается обычный ваш фавикон и title, но когда посетитель перейдет на другую вкладку, то можно показать ему другой текст и другую иконку. Логичный вопрос: "Зачем?". Попробую ответить этой гифкой:
Согласитесь, такая 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' // Вторая иконка, которая будет показываться на неактивной вкладке } } });
Теперь наши вкладки выглядят так:
Подробнее с настройками можно ознакомиться на странице проекта. А на сегодня - все. Вот такая интересная статья получилась. Спасибо Артем за интересную тему, которая действительно может оказаться полезной для многих людей. Напоминаю, что каждый может предложить тему для следующей статьи тут.
9 комментариев
Представляю какая гирлянда будет в браузере, если все начнут применять этот подход)))
Отличная статья, все подробно описано, читать одно удовольствие. Полезный сайт, часто сижу тут, а Дима в очередной раз доказывает что он профессионал. Спасибо, Дима, я разобрался!)
Спасибо за теплые слова и интересную тему статьи.
Не разобрался куда вписывать весь код(
Скрипты после jQuery, favicon между head
Что в консоли?
Спасибо! Разобрался)
Хорошо бы пример с исходниками!)
Это мой сайт, сделан в Adobe Muse, для мигающего тайтла я использовал соответствующий виджет (есть на сайте muwilab)