Невелике пояснення до стилів:
header має position: fixed; і приліплений до верхньої частини екрану;
для nav використовуємо flexbox;
для логотипу ми визначили відступи: margin-top: 50px. margin-left: 50px. padding: 20px 30px;
відступи для розділів margin-top: 50px і margin-right: 50px;
іконка мобільної версії меню прихована і з'являється тільки при дозволі екрану нижче 1061px;
також ми додали переходи transition для більш плавної роботи.
Додавання анімації до меню
Перш ніж додати анімацію до нашого меню, варто звернути увагу на наступні моменти:
- так як меню жорстко закріплено зверху сторінки, то воно має певний розмір по висоті. Слідчо основний контент повинен знаходиться відразу під меню, а не перекриватися ім.
- і наше меню повинно анімірваться при Скролл. У нашому випадку воно буде трохи зменшуватися в розмірах.
Для початку визначимо висоту меню і додамо відповідний відступ до контейнера з основним контентом.
продуктивність callbackFunc
Пара слів про продуктивність. При Скролл ми викликаємо функцію callbackFunc. А це означає, що функція може бути викликана дуже багато раз за один сеанс. При нашій простий анімації ніякого навантаження користувач не побачить, але що якщо на цю подію будуть підвішені більш складні речі? В цьому випадку потрібно подбати про продуктивність.
Найпростішим способом буде створення затримки на виконання функції.
Для нашого варіант підійде використання бібліотеки throttle.
При цьому в нашій функції потрібно зробити невеликі зміни. рядок
window. addEventListener ( "scroll". callbackFunc);
потрібно замінити на
window. addEventListener ( "scroll". _. throttle (callbackFunc. 200));
Тепер наша функція буде викликатися не частіше ніж раз в 200 мс (це значення довільне і ви можете змінювати його на свій розсуд).
Для більшої наочності в правій частині екрана ми розмістили лічильник виклику функції. Спробуйте демо з використанням затримки і без неї, щоб подивитися різницю.
У сьогоднішньому досить простому уроці ми закріпимо наші знання по використанню псевдокласів CSS. Для цього…
Для свого сайту ви можете використовувати сучасні і досить інформативні кругові діаграми. Швидше за все ви ...
У сьогоднішньому уроці ми розглянемо кілька варіантів CSS-анімації для іконки гамбургер-меню. Гамбургер-меню стало звичним атрибутом ...