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

Малюємо лінію

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

Текст банера розміщується перед PNG в тезі header:

Land of the Lost

Текст сторінки (з твору Анабасис Ксенофонта) розміщений перед header в тезі main:

From this point he marched two stages…

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

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

header {
background: url(mountain-range.jpg) no-repeat;
padding-top: 61.73333333%;
background-size: cover;
}

PNG версія становить 45.8% ширини від повної версії зображення. Вона притискається до правої межі header і стилізується:

header img {
position: absolute;
top: 0;
right: 0;
width: 45.8%;
}

Заголовок позиціонується фіксоване і стилізований за допомогою одиниць виміру vw. Так текст завжди однієї ширини з PNG:

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.75 vw;
}

Безмежний обрій

З фіксованим позиціонуванням є одна проблема: той елемент, на який застосовано дане властивість, буде правильно працювати з автоматичним нашаруванням і ковзати під гірську ланцюг PNG на зображенні. Однак якщо продовжити прокручувати сторінку вниз, текст з’явиться під тегом header, закриваючи собою текст сторінки. Фіксовані елементи навіть ігнорують overflow: hidden, присвоєне змінній.

Найпростіше рішення – розмістити відносне позиціонування тега main під тегом header. У такому разі основний текст буде нашаровуватися зверху. Далі нам потрібно додати білий фон і рамку, щоб переконатися, що область охоплює всі аж до нижньої межі тега header:

main {
background: #fff;
position: relative;
border: 1px solid #fff;
padding: 2rem 25%;
}

Багато мобільні браузери досі не підтримують фіксоване позиціонування по ряду причин. Тобто на iOS заголовок не буде рухатися окремо. Але нам все ж потрібно підлаштовувати макет на маленьких екранах:

@all media and (max-width: 400px) {
main { padding: 2rem; }
}

Висновок

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