В данном уроке мы создадим эффект прокрутки содержания, который используется на новом сайте e-bay. Для примера построим одну адаптивную страницу для представления красоты и пользы лаванды (описания растения на английском языке). JavaScript не задействован - только CSS.
Шаг 1 – Подготовка
Нам нужно 3 фоновых изображения, которые будут растягиваться на всю страницу. Исходный размер - 1800px x 1200px.
Шаг 2 – HTML
Разметка чрезвычайно проста. Каждая часть содержания помещается в элемент div с классом “wrapper”.
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>Демострация</title>
...
</head>
<body>
<header class=" content">
<div class="wrapper">
<h1>From love for lavender</h1>
<p><span>Lavender</span> (botanic name Lavandula) is a ....
</p>
</div>
</header>
<section class="content" id="oil">
<div class="wrapper">
<p><span>Lavender oil</span> is an ... </p>
</div>
</section>
...
<footer>
<div class=wrapper>
"From love for lavender" has been built ...
</div>
</footer>
</body>
</html>
Шаг 3 - Основной код CSS
Класс контейнера определяется следующим образом. Свойство box-sizing позволяет изменить модель определения размеров элемента для CSS. По умолчанию используется content-box, в которой высота и ширина включает только содержание. Если установить модель border-box ,то высота и ширина будут также включать отступы и рамку.
.wrapper {
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
Так как мы планируем сделать страницу адаптивной, то каждая секция и заголовок будут использовать единицы измерения в процентах. Например, фоновое изображение для первой секции имеет ширину 500px, которая представляет 500px/1200px x 100% = 41.66667%
#oil .wrapper {
background: url(../images/lavender2.jpg) 4.16667% center no-repeat;
padding: 10% 4.16667% 10% 50%;
background-size: 41.66667% auto;}
Значение 4.16667% соответствует 50px, когда контейнер имеет максимальную ширину. Случаи использования больших мониторов будем обрабатывать с помощью медиа запросов:
@media only screen and (min-width: 1200px) {
.wrapper {
width:1200px; }
........
#oil .wrapper {
padding: 120px 50px 120px 600px; }
Полный набор стилей вы найдете в исходниках.
Шаг 4 - Эффект прокручивания
Для нашего эффекта не используется JavaScript. Все реализуется на CSS. Так как избыточная разметка является нежелательным фактором, то будем применять псевдо-элементы :after. Они будут располагаться под каждой секцией и содержать фоновое изображение. Для фиксации воспользуемся свойством background-attachment. Также добавим легкую внутреннюю тень для имитации глубины.
section:after, header:after {
content: "";
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); }
Для каждой секции назначаем свое фоновое изображение:
header:after {
background-image: url(../images/lavenderbg1.jpg); }
#oil:after {
background-image: url(../images/lavenderbg2.jpg); }
#culinary:after {
background-image: url(../images/lavenderbg3.jpg); }
#dried:after {
background-image: url(../images/lavenderbg4.jpg); }
Шаг 5 - Завершающие штрихи
Так как свойство background-attachment:fixed не поддерживается в мобильной версии Safari, добавляем следующий медиа запрос.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 320px) and (max-device-width: 480px) {
section:after, header:after {
background-attachment: scroll; }
}
Также уменьшим шрифт для маленьких мониторов:
@media only screen and (max-width: 600px) {
body {
font-size: .75em; }
}