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

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

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

Рисуем линию

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

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

Заключение

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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

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