Певний проміжок часу, такі зображення були доволі популярними у веб-дизайні. З недавніх пір, люди стали повертатися до анімації, що б викликати більший інтерес до своїх хедерів, тому сьогодні розглянемо декілька прикладів.
Ця колекція використовує Javascript і Canvas для створення різних хедер-анімацій. Кожне демо працює з власним Javascrсript, але має і спільні ознаки:
- анімаційний цикл, який використовує
requestAnimationFrame; - форми(коло, квадрат, лінії), які модифіковані для створення різних ефектів.
Демо 1 слідкує за рухом миші на звичайних (несенсорних) девайсах. Демо 1 і демо 3 використовують анімації з анімаційної бібліотеки GreenSock GSAP.
Майте на увазі, що при роботі з анімованими хедерами, виникають декілька проблем з продуктивністю:
- постійна підтримка циклу в Javascript, може негативно вплинути на продуктивність Вашої сторінки, особливо, якщо використовуються важкі елементи;
- намагайтесь зменшити кількість розрахункових операцій у анімаційних циклах, для того, що б зберегти плавність анімації;
- деякі мобільні девайси погано підтримують Canvas, тому Вам потрібно розглядати і варіанти для мобільних пристроїв(наприклад статичне зображення).
Погляньте на 4 різні хедер-фони:
Ще немає коментарів