Една малка забележка за стил:
глава има позиции: фиксиран; и е залепен за горната част на екрана;
NAV за използване flexbox;
за логото сме определили граници: марж-нагоре: 50px. марж-наляво: 50px. подложка: 20px 30px;
маржове за секции марж-нагоре: 50px и марж-надясно: 50px;
Мобилна версия на иконата на менюто е скрита и се появява само когато разделителната способност на екрана по-долу 1061px;
Също така добавихме преход преходи за по-гладка работа.

Добавяне на анимация към менюто

Преди да добавите анимация към нашето меню, трябва да се обърне внимание на следните точки:

• като менюто е твърдо фиксирана в горната част на страницата, тя има определен размер височина. Следователно основното съдържание трябва да се намира точно под менюто, но те не се припокриват.
• и нашето меню има animirvatsya когато се превърта. В нашия случай тя ще бъде малко по-малък мащаб.

Да започнем с това ние определяме височината на менюто и да добавите подходяща подложка в контейнера с основното съдържание.

callbackFunc производителност

Няколко думи за изпълнение. Когато се обадите на callbackFunc превъртане. Това означава, че функцията може да се нарече много пъти в една сесия. С нашата проста анимация потребител, няма да виждате натоварване, но какво ще стане ако това събитие ще бъде спряна по-сложни неща? В този случай, трябва да се грижи за изпълнението.
Най-лесният начин е да се създаде забавяне в изпълнението на функцията.
За нашата версия е подходяща за използване на газта библиотека.
В този случай, нашата функция трябва да се направят малки промени. ред

прозорец. addEventListener ( "превъртете" callbackFunc.);

трябва да се заменят с

прозорец. addEventListener ( "превъртете" _ газта (callbackFunc 200) ...);

Сега нашата функция ще се нарича не по-често от веднъж на всеки 200 милисекунди (това е произволно, и можете да го промените самостоятелно).

За по-голяма яснота, от дясната страна на екрана, ние поставихме обратно извикване на функция. Опитайте демо версията с помощта на забавянето и без него, за да видите разликата.

В днешния урок ние сме съвсем проста, ние укрепваме нашите познания за използването на псевдо CSS. За тази ...

За вашия сайт, можете да използвате една модерна и доста информативни кръгови диаграми. Шансовете ви са ...

В днешния урок ще разгледаме няколко-анимационния вариант CSS за меню икони бургер. меню Хамбургер стана обичайно атрибут ...