От автора: автор статьи – гость нашего сайта Дилан Уинн-Броун. Дилан покажет нам, как достичь эффекта увеличивающегося фонового изображения в дизайне без затрат в производительности.
Недавно я работал над сайтом клиента, и он попросил меня создать такой эффект. Данный эффект очень часто используется на сайтах-портфолио, где сайт должен показывать визуальную и информационную составляющие. Существует много разных методов. Раньше я никогда что-то подобное не делал. Я начал разбираться и нашел несколько разных методов.
Первый способ предполагал использование jQuery плагина. Не совсем тот эффект, который я искал. Кроме того, плагин много весит.
Другой способ был – поместить тег img в контейнер и манипулировать изображением с помощью CSS. Тут есть свои плюсы: можно задать источник при помощи атрибута srcset, чтобы подгружалось подходящее изображение под конкретное устройство.
В моем случае я хотел управлять эффектом зума полностью через CSS, поэтому я выбрал второй способ.
Базовый функционал
Для достижения оптимальной производительности я решил использовать свойство transform для увеличения изображения. Таким образом, мы получаем CSS анимацию с аппаратным ускорением, что делает ее более плавной.
Вместо тега img я взял тег div и поместил его в контейнер. Данный блок должен был имитировать работу тега img. Структура:
|
1 2 3 |
<div class="parent"> <div class="child"></div> </div> |
Во-первых, необходимо задать размеры родительского элемента. Дочерние элементы могут заполнить родительский блок при помощи свойств width: 100% и height: 100%;. Также необходимо задать фоновое изображение, которое будет закрывать 100% блока.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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 хорошо подходит для доступности:
|
1 2 3 4 |
.parent:hover .child, .parent:focus .child { transform: scale(1.2); } |
Для максимальной поддержки в браузерах можно воспользоваться специальным инструментом для добавления вендорных префиксов. Заканчивая наш базовый эффект, можно добавить немного плавных переходов для нормального состояния дочернего элемента:
|
1 |
transition: all .5s; |
Для добавления перекрывающего слоя с определенным цветом можно использовать псевдоэлементы типа ::before:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; } |
Если теперь навести мышь на родительский блок, поверх дочернего элемента должен появиться цветной слой! И наконец, мы рассмотрим, как добавить текст на перекрывающий слой. В наш дочерний блок можно добавить новый элемент:
|
1 2 3 4 5 |
<div class="parent"> <div class="child"> <span>Hello</span> </div> </div> |
Тегу span можно задать пару стилей:
|
1 2 3 4 5 6 |
span { color: white; /* Хорошо, что мы задали фолбэк цвет! */ font-family: sans-serif; padding: 25%; position: absolute; } |
Текст появится только при наведении курсора на блок .parent:
|
1 2 3 4 |
.parent:hover span, .parent:focus span { display: block; } |
Поддержка на мобильных устройствах
Если контейнеры сделаны в виде ссылок, и состояние hover не несет в себе полезной информации, можно все оставить прямо так.
Если же в состоянии hover есть какая-то важная информация, можно привязать пустой обработчик события onclick=»» на блок .parent, чтобы данный эффект работал на сенсорных экранах. К сожалению, я не нашел другого способа, заставить работать эффект зума на сенсорных экранах. Если вы знаете другие методы, пишите об этом в комментариях!
Редакция: Dylan Winn-Brown
Источник: //css-tricks.com/
Редакция: Команда webformyself.
