Мастер-класс: верстаем интерактивный баннер
Сегодня я расскажу как создать красивый экран, реагирующий на движение мышки пользователя.
Вот то, что получится у нас в результате: Заповедники России.
1. Разметка
Для начала создадим html-разметку для нашего красивого баннера-навигации.
<section class=”container”>
<div class=”section”>
<div class=”cont_title”>
<h1>Название заповедника</h1>
<h3>Статус</h3>
</div>
<div class=”cont_desc”>
<p>Местоположение</p>
</div>
</div>
</section>Как видите, разметка очень простая. Есть общий родитель с классом .container, в него будут вложены наши плашки — блоки .section.
В каждом из блоков есть место под заголовок и описание.
Нам остается скопировать и вставить блоки еще 4 раза и внести нужные нам данные.
Посмотреть готовую html-разметку
2. Стили
Со структурой нашей страницы разобрались. Теперь пора перейти к самому интересному. Начнем писать стили!
Для начала пропишем общие стили для страницы и нашего родительского блока с классом .container.
html, body {
margin: 0;
max-width: 100%;
height: 100%;
}.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
Как вы можете заметить, мы будем строить нашу страницу при помощи технологии flexbox. Обязательно убедитесь, что все нужные вам браузеры поддерживают ее. Проверить поддержку разных версий браузера можно по ссылке.
Если вы еще не знакомы с единицами измерения vh и vw, то я советую вам почитать о них подробнее. Если коротко, то 1vh = 1% высоты окна брузера, а 1 vw = 1% ширины окна браузера. В отличии от процентов, эти единицы измерения всегда рассчитываются от размеров окна браузера.
Исходя из этой логики наш баннер всегда будет во всю ширину и высоту браузера.
Двигаемся дальше и зададим стили для каждой из наших плашек.
.section {
position: relative;
height: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
flex: 1;
}В этой части кода хочу обратить ваше внимание на то, как мы записываем свойство flex-grow. Мы не пишем его отдельно, а задаем значение в рамках шортката flex. Это связано с тем, что дальше мы будем менять его по наведению курсора, а свойство flex-grow напрямую не поддается изменениям при помощи transition.
Также мы задаем выключку по центру для текста, по центру же выравниваем наши элементы на странице.
Теперь оформим наши текстовые блоки.
.cont_title {
position: relative;
margin: auto;
width: 100%;
height: 300px;
text-align: center;
margin-top: 30vh;
}.cont_title h1 {
text-transform: uppercase;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
font-size: 3.5vw;
margin: 0;
vertical-align: middle;
}.cont_title h3 {
text-transform: uppercase;
font-size: 1.3vw;
}.cont_desc {
position: relative;
display: block;
text-align: center;
width: 60%;
height: auto;
margin: auto;
padding-top: 30px;
}.cont_desc p {
margin: 0;
font-size: 20px;
}
Размер текста тоже зададим в относительных единицах измерения. Таким образом наш текст будет изменяться пропорционально размеру экрана и всегда будет отлично выглядеть.
А теперь начнем творить магию и вносить интерактив в нашу пока неподвижную страницу.
Реагировать на наведение курсора мыши мы можем при помощи псевдокласса :hover.
.section:hover {
flex: 1.8;
transition: flex 0.4s;
}Добавляем правило для каждого блока .section и «говорим», что при наведении курсора он должен менять значение свойства flex-grow с 1 на 1.8. Также добавим свойство transition и укажем, что меняться значение должно равномерно, на протяжении 4 десятых секунды. Это позволит сделать движение плавным, без рывка.
Далее зададим подобные свойства нашим текстовым блокам и укажем, что размер текста тоже должен меняться по наведению мыши.
.section:hover > .cont_title h1 {
font-size: 5vw;
transition: font-size 0.4s;
}.section:hover > .cont_title h3 {
font-size: 1.5vw;
transition: all 0.4s;
}
Теперь давайте спрячем нижней текст в секции и будем показывать его только по наведению.
Для этого в изначальные стили добавим свойство opacity со значением 0 (ноль) и напишем инструкцию по поведению текста в случае, когда курсор находится над соответствующей секцией.
Свойство transition-delay задает небольшую задержку перед началом анимации для того, чтобы текст начал проявляться когда блок уже немного «вырастет».
.cont_desc {
opacity: 0;
}.section:hover > .cont_desc {
opacity: 1;
transition-delay: 0.5s;
transition: opacity 0.8s;
}
Теперь займемся украшением. Для начала зададим фон каждой из наших секций.
.section {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}.section:nth-child(1) {
background-image: url(“http://epic.spb.ru/demo/pic1.jpg");
}.section:nth-child(2) {
background-image: url(“http://epic.spb.ru/demo/pic2.jpg");
}.section:nth-child(3) {
background-image: url(“http://epic.spb.ru/demo/pic3.jpg");
}.section:nth-child(4) {
background-image: url(“http://epic.spb.ru/demo/pic4.jpg");
}.section:nth-child(5) {
background-image: url(“http://epic.spb.ru/demo/pic5.jpg");
}
Чтобы не задавать дополнительные классы мы воспользуемся псевдоклассами :nth-child(n) и напишем правила с фоновыми картинками. В изначальные правила для плашек добавим повторяющимся свойства background-position, background-size и background-repeat.
Становится очевидно, что черный текст на фоне красочных фотографий почти не читается. Изменим цвет текста на белый и подключим другой шрифт.
Для подключения шрифта мы воспользуемся css-правилом @font-face. Я выбрала красивый и поддерживающий русский язык шрифт Roboto Condenced.
@font-face {
font-family: ‘Roboto Condensed’;
font-style: normal;
font-weight: 400;
src: local(“Roboto Condensed”), local(“Roboto Condensed-Regular”), url(https://fonts.gstatic.com/s/Roboto Condensed/v4/jObgDQiPUtmACAaaK3pMG6CWcynf_cDxXwCLxiixG1c.ttf) format(“truetype”);
}.cont_title h1 {
color: white;
font-family: 'Roboto Condensed', sans-serif;
}.cont_title h3 {
color: white;
font-family: 'Roboto Condensed', sans-serif;
}.cont_desc p {
font-family: 'Roboto Condensed', sans-serif;
color: white;
}
Вот мы почти и закончили! Финишная прямая.
Добавим эффект затемнения для всех плашек кроме той, над которой сейчас находится курсор. Для этого воспользуемся свойством filter со значением brightness.
Обратите внимание, что это свойство может не поддерживаться некоторыми браузерами.
Не забудем про transition для .section — чтобы затемнение происходило плавно.
.container:hover > .section {
filter: brightness(22%);
}.container:hover > .section:hover {
filter: brightness(100%);
}.section {
transition: all 0.4s;
}
Поздравляю! Вы только что создали свой первый интерактивный баннер. При этом мы использовали только HTML и CSS. Никакого JavaScript.
Вы можете так же использовать этот код для создания навигации, просто добавьте в разметку ссылку или кнопку для перехода на другую страницу.
Если вы хотите научится создавать html-страницы самостоятельно, то я жду вас на нашей программе «HTML-верстка: с нуля до первого макета».
Удачи всем солдатам оберточных войск!
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся бабле и оставляете свой комментарий. Спасибо!
По мотивам работы Simone Bernabè
Originally published at netology.ru.
