Анімація favicon

ПублікаціїАнімації і ефекти

Favicon (анг. favorites icon)- іконка (значок) веб-сайту.

"Фавікон" вказується за допомогою тегу link.

<link rel="icon" href="url_адреса">

Браузери підтримують у favicon наступні типи зображень: icon, png, jpg, gif.

Розглянемо способи створення анімованого favicon.

GIF

Найпростішим спобом анімації іконки сайту є анімоване зображення GIF. Але якщо формат "image/gif" підтримують усі сучасні браузери, то відображення самої анімації ні. Тобто деякі браузери можуть відобразити зображення GIF лише перший кадр, без відображення подальших кадрів.

Декілька зображень

Анімація favicon за допомогою декількох зображень полягає у зміненні URL-адреси на наступне зображення (кадр анімації) за певний час. Зображення може бути формату: "image/png", "image/jpg".

canvas

Анімація ікон за допомогою canvas полягає у малювані на полотні та отримання зображення за допомогою метода canvas.toDataURL().

Відео у favicon

Відображення відео у favicon відбувається за допомогою малювання кадру з canvas, а уже з полотна перетворюємо у зображення.

Щоб відео відображалося по колу використовуємо атрибут loop.

Намалювати кадр з відео-плеєра дозволяє метод drawImage().

Адмін 2022-07-24 06:08:08

Тільки зареєстровані користувачі можуть писати коментарі.