Всем привет! В этом материале рассмотрим, как анимировать фавиконку на сайте .
Всем привет! В этом материале рассмотрим, как анимировать фавиконку на сайте.
Если кто-то не знает, то фавиконка – это та маленькая картинка, которая находится около названия страницы слева на вкладке.
Думаю, вы замечали, что когда приходит уведомление в социальной сети "ВКонтакте", то в фавиконке это отображается, а также показывается количество уведомлений.
Если вы хотите сделать у себя на сайте подобный функционал, то вам поможет библиотека favico.js.
Установка
Зайдите на официальный сайт и скачайте favico.js. Для этого вы можете, например, использовать Bower:
bower install favico.js
Там же вы сможете посмотреть демонстрационные примеры.
Настройка
Для использования библиотеки не нужно ничего сложного. Просто подключите нужные файлы, а дальше вызывайте объект с необходимыми параметрами.
Например, вы можете анимировать значки около вашей фавиконки. Эффекты могут быть разными. Если вы хотите, чтобы значок выезжал снизу, то напишите следующий код:
var favicon=new Favico({
animation:'slide'
});
favicon.badge(1);
Просто, не правда ли?
Присутствуют другие анимации:
- fade
- pop
- pop & fade
- position
- without animation
Помимо анимации вы можете выбрать тип фигуры: круг, прямоугольник и т.д.
Есть также возможность сделать фавиконку из любой картинки, запустить там видео, а также сделать трансляцию с веб-камеры.
Больше настроек вы можете найти на сайте разработчика.
Заключение
Если ваш сайт достаточно сложный, то эта библиотека точно добавит ему интерактивности.
А у меня на этом все. Спасибо за внимание!
