Анімована фавіконка на сайті.

Анімована фавіконка на сайті.

Якщо хтось не знає, то фавіконки – це та маленька картинка, яка знаходиться біля назви сторінки зліва на вкладці.

Думаю, ви помічали, що коли приходить повідомлення в соціальній мережі “ВКонтакте”, то в фавіконки це відображається, а також показується кількість повідомлень.

Якщо ви хочете зробити у себе на сайті подібний функціонал, то вам допоможе бібліотека 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

Крім анімації ви можете вибрати тип фігури: коло, прямокутника і т.д.

Є також можливість зробити фавіконки з будь-якої картинки, запустити там відео, а також зробити трансляцію з веб-камери.

Більше варіантів ви можете знайти на сайті розробника.

1 Star2 Stars3 Stars4 Stars5 Stars (4 Votes, average: 4.75 out of 5)

Залишити коментар