В данном уроке мы создадим простую адаптивную страницу с заголовком, украшенным каруселью, в которой изображения проскальзывают справа налево. Наше решение не использует JavaScript, слайдшоу основано на анимациях CSS3, которые поддерживаются в большинстве современных браузеров: Firefoх 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ и IE10.
Шаг 1 – Подготовительный
Нам потребуется 4 больших изображения (в нашем примере используется размер 1200px x 390px). Для горизонтального слайдера мы подготовим картинку размером 4800px x 390px в Photoshop, все наши изображения разместим одно за другим по горизонтали и сохраним результат в пригодном для веб пространства формате (“slider-horizontal.jpg”).
Шаг 2 – HTML
В действительности мы будем анимировать свойство background-position для нашего заголовка. Сам заголовок имеет очень простую разметку:
<header>
<h1>L'ile de Batz</h1>
</header>
Полный код страницы выглядит следующим образом:
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheets/screen.css" media="screen" title="no title">
</head>
<body>
<header>
<h1>L'ile de Batz</h1>
</header>
<blockquote>
Maecenas faucibus ....
</blockquote>
<div class="content">
<section class="main">
<h2>Once upon a time…</h2>
<p>Aenean lacinia bibendum ...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</section>
<section class="links">
<h2>Links to learn by heart..</h2>
<ul>
<li><a href="#" target="_blank">Bar & restaurants</a></li>
...
</ul>
</section>
</div>
<footer>
<p class="copyright">..</p>
</footer>
</body>
</html>
Шаг 3. CSS для мобильных устройств
Мы начнем определять стили для мобильных устройств. Зададим основу дизайна, а затем добавим расширения шаблона для больших экранов. В тексте урока приводятся только основные свойства, полный код можно посмотреть в исходниках:
body {
width: 90%;
min-width: 300px;
max-width: 1200px;
margin: 0 auto;
padding-top: 1em;
color: #504331
}
header {
text-align: center;
position: relative; }
h1 {
font-size: 2.75em;
background: white;
display: inline-block;
padding: 0 10px;
margin-bottom: .25em; }
h1:after {
content: "";
height: 2px;
display: block;
position: absolute;
left: 0;
right: 0;
top: .5em;
z-index: -1;
border-top: 1px solid #504331;
border-bottom: 1px solid #504331; }
.links {
background: url(../images/map.png) bottom center no-repeat;
padding-bottom: 177px; }
Шаг 4. Стили для больших экранов
На больших экранах секции .main и .screen должны отображаться по другому. Секция .link будет иметь ширину 300px и позиционироваться как правая боковая панель, а секция .main останется слева. Также добавим двойную линию для разделения секций. Определять ширину экрана больше 1024px будем с помощью запроса @media:
@media only screen and (min-width: 1024px) {
.content {
position: relative; }
.main {
margin-right: 320px;
padding: .5em 20px .5em 0;
/*add a double line */
border-right: 1px solid #504331;
box-shadow: 2px 0 white, 3px 0 #504331; }
.links {
position: absolute;
right: 0;
top: 0;
width: 300px;
text-align: right; }
}
Шаг 5. Адаптивные изображения в заголовке
Начнем работу над основной частью нашего урока: адаптивный слайдер на CSS в заголовке. Сначала обеспечим адаптивность фонового изображения.
header {
background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x;
background-size: 400%;
padding-bottom: 32.5%; }
С помощью двух значений, выраженных в процентах (400% для свойства background-size и 32.5% для нижнего отступа) фон заголовка будет выводиться корректно вне зависимости от размера экрана.
Почему 400% ? У нас есть 4 слайда, поэтому выводиться будет 1/4 от фонового изображения в заголовке. То есть, размер фона должен быть в 4 раза шире чем заголовок.
Почему 32.5%? Мы позиционируем наш фон внизу заголовка. Высота фонового изображения 390px, ширина отдельного слайда 1200px, 390/1200 = 0.325, то есть высота составляет 32.5% ширины.
Шаг 6. Анимация
Мы будем анимировать свойство background-position. Чтобы выводилось второе изображение свойство background-position должно иметь значение 33.33333% bottom, третье - 66.66667% bottom, а четвертое – 100% bottom. Первое изображение выводится при значении свойства background-position равном 0 bottom или 133.33333% bottom (мы устанавливаем для повторений значение repeat-x).
Каждое изображение имеет 25% от времени "славы". Первое выводится от 0 до 25%, второе - от 25% до 50%, третье - от 50% до 75%, а последнее - от 75% до 100%. Мы устанавливаем переходы так, чтобы изображение начинало выскальзывать немного раньше (используем значение 5%) прежде, чем истекут 25% его времени вывода. Вот так выглядит @keyframes:
@keyframes h_slide {
0% {
background-position: 0% bottom; }
20% {
background-position: 0% bottom; }
25% {
background-position: 33.33333% bottom; }
45% {
background-position: 33.33333% bottom; }
50% {
background-position: 66.66667% bottom; }
70% {
background-position: 66.66667% bottom; }
75% {
background-position: 100% bottom; }
95% {
background-position: 100% bottom; }
100% {
background-position: 133.33% bottom; } }
Обратите внимание, что нужно добавить префиксы браузеров: @-webkit-keyframes (для Chrome, Safari, iOS Safari, Android) и @-moz-keyframes (для Firefox 15).
Ниже приводится полный код заголовка. Наша анимация “h_slide” повторяется каждые 24 с (6 с для каждого слайда) в бесконечном цикле. Функция времени имеет значение ease-out, так что каждый слайд замедляется в конце перехода.
header {
text-align: center;
position: relative;
background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x;
background-size: 400%;
padding-bottom: 32.5%;
-webkit-animation: h_slide 24s ease-out infinite;
-moz-animation: h_slide 24s ease-out infinite;
animation: h_slide 24s ease-out infinite; }
Готово!