Від автора: нещодавно я побачив дуже цікавий візуальний ефект, який можна описати тільки поруч антонімів: фіксований, прокручуємо, зникаючий банер. У цій статті я розповім, як я відтворював цей ефект.
Малюємо лінію
В принципі, досягти такого ефекту можна шляхом створення 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.
