От автора: недавно я увидел очень интересный визуальный эффект, который можно описать только рядом антонимов: фиксированный, прокручиваемый, исчезающий баннер. В этой статье я расскажу, как я воссоздавал этот эффект.
Рисуем линию
В принципе, достичь такого эффекта можно путем создания PNG изображения с альфа маской в 32 бита. Тут возникает две проблемы: размер PNG файла полноэкранного баннера будет огромным, и нам потребовалась бы копия изображения для фона. Я решил эту проблему, вырезав часть изображения. Я оставил ту часть изображения, за которую будет уходить текст. Получился прозрачный файл PNG.
Текст баннера размещается перед PNG в теге header:
|
1 2 3 4 |
<header> <h1>Land <span>of the</span> Lost</h1> <img src="mountain-range-front.png" alt> </header> |
Текст страницы (из сочинения Анабасис Ксенофонта) размещен перед header в теге main:
|
1 2 3 |
<main> <p>From this point he marched two stages... </main> |
Полная версия изображения сохранена в формате JPG и применяется в качестве фона через CSS. Так как фоновое изображение не подходит по размеру под контейнер, а PNG изображение должно быть адаптивным, мы изменим размер header с помощью свойства padding-top. Чтобы вычислить точное значение, необходимо поделить высоту изображения на его ширину: 926 / 1500 = 0.6193333333
CSS для header стал таким:
|
1 2 3 4 5 |
header { background: url(mountain-range.jpg) no-repeat; padding-top: 61.73333333%; background-size: cover; } |
PNG версия составляет 45.8% ширины от полной версии изображения. Она прижимается к правой грани header и стилизуется:
|
1 2 3 4 5 6 |
header img { position: absolute; top: 0; right: 0; width: 45.8%; } |
Заголовок позиционирован фиксировано и стилизован при помощи единиц измерения vw. Так текст всегда будет одной ширины с PNG:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
header h1 { position: fixed; top: 2rem; right: 2rem; font-size: 12vw; line-height: .8; margin-top: 0; text-align: center; } header h1 span { display: block; font-size: 8.75vw; } |
Безграничный горизонт
С фиксированным позиционированием есть одна проблема: тот элемент, на который применено данное свойство, будет правильно работать с автоматическим наслоением и скользить под горную цепь на PNG изображении. Однако если продолжить прокручивать страницу вниз, текст появится под тегом header, закрывая собой текст страницы. Фиксированные элементы даже игнорируют overflow: hidden, присвоенное контейнеру.
Самое простое решение – размесить относительное позиционирование тега main под тегом header. В таком случае основной текст будет наслаиваться сверху. Дальше нам потребуется добавить белый фон и рамку, чтобы убедиться, что область охватывает все вплоть до нижней границы тега header:
|
1 2 3 4 5 6 |
main { background: #fff; position: relative; border: 1px solid #fff; padding: 2rem 25%; } |
Многие мобильные браузеры до сих пор не поддерживают фиксированное позиционирование по ряду причин. То есть на iOS заголовок не будет двигаться отдельно. Но нам все же нужно подстраивать макет на маленьких экранах:
|
1 2 3 |
@media all and (max-width: 400px) { main { padding: 2rem; } } |
Заключение
Конечный результат хорошо подходит для дизайнов полноэкранных страниц. Размер файлов можно уменьшить, использовав формат WebP и/или srcset и image-set(), как показано в демо на CodePen.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
