Від автора: автор статті – гість нашого сайту Ділан Уїнн-Броун. Ділан покаже нам, як досягти ефекту збільшення фонового зображення в дизайні без витрат на продуктивності.
Нещодавно я працював над сайтом клієнта, і він попросив мене створити такий ефект. Цей ефект дуже часто використовується на сайтах-портфоліо, де сайт повинен показувати візуальну та інформаційну складові. Існує багато різних методів. Раніше я ніколи щось таке не робив. Я почав розбиратися і знайшов кілька різних методів.
Перший спосіб передбачав використання jQuery плагін. Не зовсім той ефект, який я шукав. Крім того, плагін багато важить.
Інший спосіб – помістити тег img в контейнер і маніпулювати зображенням за допомогою CSS. Тут є свої плюси: можна задати джерело за допомогою атрибута srcset, щоб подгружалось відповідне зображення під конкретний пристрій.
В моєму випадку я хотів керувати ефектом зума повністю через CSS, тому я вибрав другий спосіб.
Базовий функціонал
Для досягнення оптимальної продуктивності, я вирішив використовувати властивість transform для збільшення зображення. Таким чином, ми отримуємо CSS анімацію з апаратним прискоренням, що робить її більш плавною.
Замість тега img я взяв тег div і помістив його в контейнер. Даний блок мав імітувати роботу тега img. Структура:
По-перше, необхідно задати розміри батьківського елемента. Дочірні елементи можуть заповнити батьківський блок за допомогою властивостей 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;
}
Якщо тепер навести мишу на батьківський блок, поверх дочірнього елемента повинен з’явитися кольоровий шар! І нарешті, ми розглянемо, як додати текст на перекриває шар. В наш дочірній блок можна додати новий елемент:
Тегу 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, щоб даний ефект працював на сенсорних екранах. На жаль, я не знайшов іншого способу змусити працювати ефект зума на сенсорних екранах. Якщо ви знаєте інші методи, пишіть про це в коментарях!
