Недавно был запущен новый, увлекательный сайт, под названием The Markup. Их слоган: Современные технологии следят за тобой. А мы следим за современными технологиями. Отличная работа от Upstatement. Контент выглядит потрясающе, но нас больше интересует дизайн и техническая сторона. На сайте есть множество красивых и интересных вещей, от утонченной типографики, интересного расположения и интересного смещения блоков по диагонали при наведении на них, до изящных точечных паттернов в качестве подложки.

Футер также сделан очень интересно и необычно выскальзывает из под контента при прокрутке страницы до конца. Давайте повторим его реализацию!

При создании этого эффекта мы будем использовать такие приемы:

  1. Высота основной области контента не меньше 100vh. Большинство страниц сайтов в любом случае больше этого параметра, но зададим его для страниц с минимальным количеством контента.
  2. Фон основной области контента будет залит цветом, так как под контентом будет прятаться наш футер.
  3. Футер будет идти в HTML после основной области с контентом, поэтому, чтобы перекрыть его, нам потребуется задавать контенту относительное позиционирование и z-index.
  4. Для футера будем использовать свойство position: sticky;, чтобы «прилепить» его к низу.

Последний из пунктов — самый оригинальный прием и он на самом деле даже оригинальнее, чем это делает The Markup. Они используют position: fixed; для футера и «магическое число» для margin-bottom основного содержимого, чтобы все работало как надо. Никаких «магических чисел» не нужно, когда вы задаете position: sticky;.

See the Pen Revealing Footer by Odinokun (@Odinokun) on CodePen.

Тот факт, что это так просто сделать и без «магических чисел», очень радует. Спасибо Стивену Шоу за трюк с «прилипанием»! Я изначально пробовал использовать фиксированное позиционирование и «магические числа», но без них гораздо удобнее.

Preethi показала нам очень похожую технику в 2018 году. Основное отличие между ними заключается в использовании линейного градиента для фона, что является хорошим решением, если применение сплошного цвета ограничено дизайном.

Источник

0 0 голос
Рейтинг статьи