Мастер-класс: верстаем интерактивный баннер
Сегодня я расскажу как создать красивый экран, реагирующий на движение мышки пользователя.
Вот то, что получится у нас в результате: Заповедники России.
.png)
Очень эффектно выглядит на большом экране
1. Разметка
Для начала создадим html-разметку для нашего красивого баннера-навигации.
See the Pen Заповедники России. HTML-разметка by Alena (@solarrust) on CodePen.
Как видите, разметка очень простая. Есть общий родитель с тегом. container, в него будут вложены наши плашки — блоки .section.
В каждом из блоков есть место под заголовок и описание.
Нам остается скопировать и вставить блоки еще 4 раза и внести нужные нам данные.
Посмотреть готовую html-разметку
2. Стили
Со структурой нашей страницы разобрались. Теперь пора перейти к самому интересному. Начнем писать стили!
Для начала пропишем общие стили для страницы и нашего родительского блока с классом .container
See the Pen Заповедники России. CSS, v1 by Alena (@solarrust) on CodePen.
Как вы можете заметить, мы будем строить нашу страницу при помощи технологии flexbox. Обязательно убедитесь, что все нужные вам браузеры поддерживают ее. Проверить поддержку разных версий браузера можно по ссылке.
Если вы еще не знакомы с единицами измерения vh и vw, то я советую вам почитать о них подробнее. Если коротко, то 1vh = 1% высоты окна брузера, а 1 vw = 1% ширины окна браузера. В отличии от процентов, эти единицы измерения всегда рассчитываются от размеров окна браузера.
Исходя из этой логики наш баннер всегда будет во всю ширину и высоту браузера.
Двигаемся дальше и зададим стили для каждой из наших плашек.
See the Pen Заповедники России. CSS, v2 by Alena (@solarrust) on CodePen.
В этой части кода хочу обратить ваше внимание на то, как мы записываем свойство flex-grow. Мы не пишем его отдельно, а задаем значение в рамках шортката flex. Это связано с тем, что дальше мы будем менять его по наведению курсора, а свойство flex-grow напрямую не поддается изменениям при помощи transition.
Также мы задаем выключку по центру для текста, по центру же выравниваем наши элементы на странице.
Теперь оформим наши текстовые блоки.
See the Pen Заповедники России. CSS, v3 by Alena (@solarrust) on CodePen.
Размер текста тоже зададим в относительных единицах измерения. Таким образом наш текст будет изменяться пропорционально размеру экрана и всегда будет отлично выглядеть.
А теперь начнем творить магию и вносить интерактив в нашу пока неподвижную страницу.
Реагировать на наведение курсора мыши мы можем при помощи псевдокласса : hover.
See the Pen Заповедники России. CSS, v4 by Alena (@solarrust) on CodePen.
Добавляем правило для каждого блока .section и «говорим», что при наведении курсора он должен менять значение свойства flex-grow с 1 на 1.8. Также добавим свойство transition и укажем, что меняться значение должно равномерно, на протяжении 4 десятых секунды. Это позволит сделать движение плавным, без рывка.
Далее зададим подобные свойства нашим текстовым блокам и укажем, что размер текста тоже должен меняться по наведению мыши.
See the Pen Заповедники России. CSS, v5 by Alena (@solarrust) on CodePen.
Теперь давайте спрячем нижней текст в секции и будем показывать его только по наведению.
Для этого в изначальные стили добавим свойство opacity со значением 0 и напишем инструкцию по поведению текста когда курсор находится над соответствующей секцией.
Свойство transition-delay задает небольшую задержку перед началом анимации для того, чтобы текст начал проявляться когда блок уже немного»вырастет».
See the Pen Заповедники России. CSS, v5 by Alena (@solarrust) on CodePen.
Теперь займемся украшением. Для начала зададим фон каждой из наших секций.
See the Pen Заповедники России. CSS, v6 by Alena (@solarrust) on CodePen.
Чтобы не задавать дополнительные классы мы воспользуемся псевдоклассами : nth-child(n) и напишем правила с фоновыми картинками. В изначальные правила для плашек добавим повторяющимся свойства background-position, background-size и background-repeat.
Становится очевидно, что черный текст на фоне красочных фотографий почти не читается. Изменим цвет текста на белый и подключим другой шрифт.
Для подключения шрифта мы воспользуемся css-правилом @font-face. Я выбрала красивый и поддерживающий русский язык шрифт Roboto Condenced.
See the Pen Заповедники России. CSS, v7 by Alena (@solarrust) on CodePen.
Вот мы почти и закончили! Финишная прямая.
Добавим эффект затемнения для всех плашек кроме той, над которой сейчас находится курсор. Для этого воспользуемся свойством filter со значением brightness.
Обратите внимание, что это свойство может не поддерживаться некоторыми браузерами.
Не забудем про transition для .section — чтобы затемнение происходило плавно.
See the Pen Заповедники России. CSS, v8 by Alena (@solarrust) on CodePen.
Поздравляю! Вы только что создали свой первый интерактивный баннер. При этом мы использовали только HTML и CSS. Никакого JavaScript.
Вы можете так же использовать этот код для создания навигации, просто добавьте ссылку или кнопку для перехода на другую страницу.
Если вы хотите научится создавать html-страницы самостоятельно, то я жду вас на нашей программе»HTML-верстка: с нуля до первого макета».
Напишите в комментариях, какие еще элементы интерфейса вам было бы интересно изучить и я сделаю соответствующий мастер-класс.
Удачи всем солдатам оберточных войск!
По мотивам работы Simone Bernabè
Полный текст статьи читайте на Нетология
