Тази тенденция започна със странични панели, но днес той е нараснал в популярността и към част от хедър (заглавна) на сайта. Защо? Тъй като често в частта с удар с глава подредени навигационното меню.
Нека да разгледаме развитието на това, което ние сега се обърнем.
Ако искате да следвате кода в хода на управлението, пълният код може да бъде изтеглена от тук.
HTML за нашия пример е съвсем проста. Всичко, което трябва, е вътре в заглавната част на h1. Под нея ще има изображение, което принуждава посетителите, за да превъртате страницата, която ще ни позволи да се тества ефекта.
CSS-пропускателни пунктове - това е най-добрият начин да се контролира анимация искате да приложите към нашия лепкава заглавна част. Всичко, за което ние използваме JQuery, това определение (превъртане позиция) местоположението на свитъка на страницата.
Това означава, че ние ще бъдем в състояние да оформите частта с глава на базата на класа на "лепкави" дали се прилага.
Важно е да се отбележи, че в този пример, ние доста добре на JQuery, но има голяма резервен вариант. Ако подкрепата й # 097; vascript е изключена, навигацията ще продължи да работи, тъй като заглавието е проектиран като обща заглавна част от всеки уеб сайт.
Нашата CSS-код се използва за оформяне на двете различни положения: позиция по подразбиране, както и позицията на "лепкави". И между тези две позиции, няма преход.
За да започнете, нека добавим някои прости стилове, които подобряват външния вид на нашата заглавна част:
Сега идва най-интересната част: когато потребителят превърта заглавката на страницата се използва за клас "лепкави", и сега имаме възможност да го проектираме различен висш приоритет внимание на страницата. Ние също така да поиска от фиксирана позиционирането на местоположението си, не се е променила.
Тук трябва да направим няколко неща: на първо място, ние трябва да промените размера, който ще отнеме по-малко място на екрана. И също така трябва да промените цвета и настроите ляво подравняване на визуален елемент, който не пречи на потребители:
В общи линии, това, което решите да направите тук зависи от устройството, което трябва да се получи. И за да можете да правите каквото си искате, разбира се.
Ако сте готови да го тества, се оказва, ще видите, че частта с удар с глава се променя, докато превъртате.
Сега, за да анимирате тази промяна, ние всички трябва да направите е да поставите на прехода за удар с глава:
С възможността да се използват CSS3-функции и да превключвате класове, използвайки JQuery, да се развива анимирани заглавните части стане невероятно проста задача.
Какво друго трябва да се отбележи, е фактът, че кодът е напълно адаптирани към различни ситуации.
Свързани статии