Шапка сайта демонстрация для сайта RUDEBOXВ последнее время стали сайты с минималистическим дизайном, дизайнеры доходят до такой степени минимализации, что убирают самые важные элементы на сайте в начале просмотра, но это визуальный обман, меню иногда очень элегантно появляется, в данном уроке мы рассмотрим одну из таких возможностей, мы создадим скользящую шапку сайта, при прокрутке которой будет изменяться ее размер, кроме этого, она будет фиксированной и к нашей шапке будет привинчено меню, в центре шапки будет логотип, который изменяет свой размер при прокрутке адаптируется.

Такой эффект зачастую используют одностраничные сайты, сайты с эффектом параллакса, и студии, это весьма необычный эффект, что наверняка привлечет взор пользователя, и заинтересует Вашим ресурсом. И так, давайте приступим.

Шаг 1. HTML

Разметка достаточно простая, у нас будет команда вызова шапки, с присвоенным классом, а далее стандартное меню, все это будет заключено в контейнер, обратите внимание, что текст приведен для демонстрации, чтобы стилизировать демонстрацию для прокрутки станицы, по этому данную разметку мы не приводим.

С разметкой мы разобрались, в ней нет ничего сложного, полный код разметки можно просмотреть в исходника, давайте перейдем к следующему шагу.

Демонстрация для сайта RUDEBOX

Шаг 2. CSS

Следующим шагом будет стилизация шапки, нам необходимо определить параметры позиционирования, кроме этого у нас будет трансформация шапки, для этого мы указываем максимальное и минимальное значение положения шапки при прокрутки.

Кроме этого мы устанавливаем позиционирование двух изображений, это будет логотип в центре шапки, который был подготовлен ранее, и фоновое изображение, следует отметить, что шапка у нас будет полностью адаптивной.

Шаг 3. JS

Для плавной анимации при прокрутке и работу шапки при изменении размера окна мы определим небольшими функциями JavaScript:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: