Создание футера, который плавно появляется из-под основного контента при прокрутке страницы, — это интересное и функциональное решение, которое добавляет вашему сайту современный вид. В этой статье мы рассмотрим, как реализовать такой эффект с помощью HTML и CSS.
Чтобы добиться нужного эффекта, важно учесть несколько ключевых моментов:
Высота основного контента: Основной контент страницы должен занимать всю высоту видимой области экрана (100vh). Это стандартный прием, который используется на большинстве современных сайтов.
Непрозрачность фона: Фон основного контента должен быть непрозрачным, чтобы скрыть футер, находящийся под ним.
Расположение футера: Футер размещается за основным контентом. Для этого используется сочетание свойств position: relative и z-index в блоке с контентом.
Закрепление футера внизу экрана: Свойство position: sticky позволяет закрепить футер в нижней части экрана, чтобы он оставался видимым при прокрутке.
Структура HTML-документа
Простая структура HTML может выглядеть следующим образом:
<body>
<main></main>
<footer></footer>
</body>
CSS для выскальзывающего футера
Теперь давайте рассмотрим CSS, который реализует желаемый эффект:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
/* Контент должен занимать всю видимую область */
min-height: 100vh;
/* Фон контента непрозрачный */
background: white;
/* Контент должен находиться перед футером */
position: relative;
z-index: 1;
font: 16px/1.4 system-ui, sans-serif;
padding: 2rem;
}
footer {
/* Фиксируем футер внизу экрана */
position: sticky;
bottom: 0;
left: 0;
width: 100%;
background: #252a47;
display: grid;
place-items: center;
padding: 50px;
}
Разбор кода
min-height: 100vh; — Основной контент занимает всю высоту экрана, чтобы футер оставался скрытым до тех пор, пока страница не будет прокручена.
background: white; — Фон основного контента непрозрачный, что позволяет ему скрывать футер.
position: relative; и z-index: 1; — Эти свойства обеспечивают, что основной контент находится перед футером.
position: sticky; — Закрепляет футер в нижней части экрана до тех пор, пока его не «выдавит» прокрутка.
Заключение
Этот простой, но эффектный подход позволяет создать на вашем сайте футер, который плавно появляется при прокрутке. Вы можете легко настроить дизайн и стиль этого эффекта под нужды вашего проекта.
Вот рабочий пример, который можно посмотреть и протестировать на CodePen.
Теперь ваш сайт будет выглядеть еще более профессионально и привлекательно!
