Анімовані хедери

1 хв. читання

Певний проміжок часу, такі зображення були доволі популярними у веб-дизайні. З недавніх пір, люди стали повертатися до анімації, що б викликати більший інтерес до своїх хедерів, тому сьогодні розглянемо декілька прикладів.

Ця колекція використовує Javascript і Canvas для створення різних хедер-анімацій. Кожне демо працює з власним Javascrсript, але має і спільні ознаки:

  • анімаційний цикл, який використовує requestAnimationFrame;
  • форми(коло, квадрат, лінії), які модифіковані для створення різних ефектів.


Демо 1 слідкує за рухом миші на звичайних (несенсорних) девайсах. Демо 1 і демо 3 використовують анімації з анімаційної бібліотеки GreenSock GSAP.
Майте на увазі, що при роботі з анімованими хедерами, виникають декілька проблем з продуктивністю:

  • постійна підтримка циклу в Javascript, може негативно вплинути на продуктивність Вашої сторінки, особливо, якщо використовуються важкі елементи;
  • намагайтесь зменшити кількість розрахункових операцій у анімаційних циклах, для того, що б зберегти плавність анімації;
  • деякі мобільні девайси погано підтримують Canvas, тому Вам потрібно розглядати і варіанти для мобільних пристроїв(наприклад статичне зображення).


Погляньте на 4 різні хедер-фони:
 

AnimatedHeaderBackgrounds_01

AnimatedHeaderBackgrounds_02

AnimatedHeaderBackgrounds_03

AnimatedHeaderBackgrounds_04

 

Демо

 

Завантажити

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.7K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація