Як анімувати фавіконки на сайті.

Відео: Як СТВОРИТИ FAVICON і встановити його на сайт WORDPRESS. Уроки по Wordpress

Всім привіт! У цій статті ми розглянемо, як анімувати фавіконки на сайті.

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

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

Якщо ви хочете зробити у себе на сайті подібний функціонал, то вам допоможе бібліотека favico.js.

установка

Зайдіть на офіційний сайт і скачайте favico.js. Для цього ви можете, наприклад, використовувати Bower:

bower install favico.js

Там же ви зможете подивитися демонстраційні приклади.

Налаштування

Для використання бібліотеки не потрібно нічого складного. Просто підключіть потрібні файли, а далі викликайте об`єкт з необхідними параметрами.

Наприклад, ви можете анімувати значки біля вашої фавіконки. Ефекти можуть бути різними. Якщо ви хочете, щоб значок виїжджав знизу, то напишіть наступний код:

var favicon=newFavico({ 
 animation:`Slide` 
}) - 
favicon.badge(1) -

Просто, чи не так?

Присутні інші анімації:

fade
pop
pop fade
position
without animation

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

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

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

висновок

Якщо ваш сайт досить складний, то ця бібліотека точно додасть йому інтерактивності.

Відео: Сервіс безкоштовних онлайн додатків! Гіф анімація, фавікон, конвертація фото!

А у мене на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі