Фиксированный баннер, исчезающий во время прокрутки страницы

Фиксированный баннер, исчезающий во время прокрутки страницы

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

Рисуем линию

В принципе, достичь такого эффекта можно путем создания PNG изображения с альфа маской в 32 бита. Тут возникает две проблемы: размер PNG файла полноэкранного баннера будет огромным, и нам потребовалась бы копия изображения для фона. Я решил эту проблему, вырезав часть изображения. Я оставил ту часть изображения, за которую будет уходить текст. Получился прозрачный файл PNG.

Текст баннера размещается перед PNG в теге header:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Текст страницы (из сочинения Анабасис Ксенофонта) размещен перед header в теге main:

Полная версия изображения сохранена в формате JPG и применяется в качестве фона через CSS. Так как фоновое изображение не подходит по размеру под контейнер, а PNG изображение должно быть адаптивным, мы изменим размер header с помощью свойства padding-top. Чтобы вычислить точное значение, необходимо поделить высоту изображения на его ширину: 926 / 1500 = 0.6193333333

CSS для header стал таким:

PNG версия составляет 45.8% ширины от полной версии изображения. Она прижимается к правой грани header и стилизуется:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Заголовок позиционирован фиксировано и стилизован при помощи единиц измерения vw. Так текст всегда будет одной ширины с PNG:

Безграничный горизонт

С фиксированным позиционированием есть одна проблема: тот элемент, на который применено данное свойство, будет правильно работать с автоматическим наслоением и скользить под горную цепь на PNG изображении. Однако если продолжить прокручивать страницу вниз, текст появится под тегом header, закрывая собой текст страницы. Фиксированные элементы даже игнорируют overflow: hidden, присвоенное контейнеру.

Самое простое решение – размесить относительное позиционирование тега main под тегом header. В таком случае основной текст будет наслаиваться сверху. Дальше нам потребуется добавить белый фон и рамку, чтобы убедиться, что область охватывает все вплоть до нижней границы тега header:

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

Заключение

Конечный результат хорошо подходит для дизайнов полноэкранных страниц. Размер файлов можно уменьшить, использовав формат WebP и/или srcset и image-set(), как показано в демо на CodePen.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree