Увеличивающиеся фоновые изображения

Увеличивающиеся фоновые изображения

От автора: автор статьи – гость нашего сайта Дилан Уинн-Броун. Дилан покажет нам, как достичь эффекта увеличивающегося фонового изображения в дизайне без затрат в производительности.

Недавно я работал над сайтом клиента, и он попросил меня создать такой эффект. Данный эффект очень часто используется на сайтах-портфолио, где сайт должен показывать визуальную и информационную составляющие. Существует много разных методов. Раньше я никогда что-то подобное не делал. Я начал разбираться и нашел несколько разных методов.

Первый способ предполагал использование jQuery плагина. Не совсем тот эффект, который я искал. Кроме того, плагин много весит.

Другой способ был – поместить тег img в контейнер и манипулировать изображением с помощью CSS. Тут есть свои плюсы: можно задать источник при помощи атрибута srcset, чтобы подгружалось подходящее изображение под конкретное устройство.
В моем случае я хотел управлять эффектом зума полностью через CSS, поэтому я выбрал второй способ.

Базовый функционал

Для достижения оптимальной производительности я решил использовать свойство transform для увеличения изображения. Таким образом, мы получаем CSS анимацию с аппаратным ускорением, что делает ее более плавной.

Вместо тега img я взял тег div и поместил его в контейнер. Данный блок должен был имитировать работу тега img. Структура:

<div class="parent">
  <div class="child"></div>
</div>

Во-первых, необходимо задать размеры родительского элемента. Дочерние элементы могут заполнить родительский блок при помощи свойств width: 100% и height: 100%;. Также необходимо задать фоновое изображение, которое будет закрывать 100% блока.

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* фолбэк цвет */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

Затем мы добавляем эффект hover на родительский блок. Данный эффект будет влиять на дочерний элемент. Псевдокласс focus хорошо подходит для доступности:

.parent:hover .child,
.parent:focus .child {
  transform: scale(1.2);
}

Для максимальной поддержки в браузерах можно воспользоваться специальным инструментом для добавления вендорных префиксов. Заканчивая наш базовый эффект, можно добавить немного плавных переходов для нормального состояния дочернего элемента:

transition: all .5s;

Для добавления перекрывающего слоя с определенным цветом можно использовать псевдоэлементы типа ::before:

.child::before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(52, 73, 94, 0.75);
}

.parent:hover .child:before,
.parent:focus .child:before {
  display: block;
}

Если теперь навести мышь на родительский блок, поверх дочернего элемента должен появиться цветной слой! И наконец, мы рассмотрим, как добавить текст на перекрывающий слой. В наш дочерний блок можно добавить новый элемент:

<div class="parent">
   <div class="child">
      <span>Hello</span>
   </div>
</div>

Тегу span можно задать пару стилей:

span {
  color: white; /* Хорошо, что мы задали фолбэк цвет! */
  font-family: sans-serif;
  padding: 25%;
  position: absolute;
}

Текст появится только при наведении курсора на блок .parent:

.parent:hover span,
.parent:focus span {
  display: block;
}

Поддержка на мобильных устройствах

Если контейнеры сделаны в виде ссылок, и состояние hover не несет в себе полезной информации, можно все оставить прямо так.

Если же в состоянии hover есть какая-то важная информация, можно привязать пустой обработчик события onclick=»" на блок .parent, чтобы данный эффект работал на сенсорных экранах. К сожалению, я не нашел другого способа, заставить работать эффект зума на сенсорных экранах. Если вы знаете другие методы, пишите об этом в комментариях!

Редакция: Dylan Winn-Brown

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree