Недавно был запущен новый, увлекательный сайт, под названием The Markup. Их слоган: Современные технологии следят за тобой. А мы следим за современными технологиями. Отличная работа от Upstatement. Контент выглядит потрясающе, но нас больше интересует дизайн и техническая сторона. На сайте есть множество красивых и интересных вещей, от утонченной типографики, интересного расположения и интересного смещения блоков по диагонали при наведении на них, до изящных точечных паттернов в качестве подложки.
Футер также сделан очень интересно и необычно выскальзывает из под контента при прокрутке страницы до конца. Давайте повторим его реализацию!
При создании этого эффекта мы будем использовать такие приемы:
- Высота основной области контента не меньше 100vh. Большинство страниц сайтов в любом случае больше этого параметра, но зададим его для страниц с минимальным количеством контента.
- Фон основной области контента будет залит цветом, так как под контентом будет прятаться наш футер.
- Футер будет идти в HTML после основной области с контентом, поэтому, чтобы перекрыть его, нам потребуется задавать контенту относительное позиционирование и z-index.
- Для футера будем использовать свойство position: sticky;, чтобы "прилепить" его к низу.
Последний из пунктов - самый оригинальный прием и он на самом деле даже оригинальнее, чем это делает The Markup. Они используют position: fixed; для футера и "магическое число" для margin-bottom основного содержимого, чтобы все работало как надо. Никаких "магических чисел" не нужно, когда вы задаете position: sticky;.
Тот факт, что это так просто сделать и без "магических чисел", очень радует. Спасибо Стивену Шоу за трюк с "прилипанием"! Я изначально пробовал использовать фиксированное позиционирование и "магические числа", но без них гораздо удобнее.
Preethi показала нам очень похожую технику в 2018 году. Основное отличие между ними заключается в использовании линейного градиента для фона, что является хорошим решением, если применение сплошного цвета ограничено дизайном.