Збільшуються фонові зображення

20

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

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

Перший спосіб передбачав використання 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;
}

Якщо тепер навести мишу на батьківський блок, поверх дочірнього елемента повинен з’явитися кольоровий шар! І нарешті, ми розглянемо, як додати текст на перекриває шар. В наш дочірній блок можна додати новий елемент:

Hello

Тегу 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, щоб даний ефект працював на сенсорних екранах. На жаль, я не знайшов іншого способу змусити працювати ефект зума на сенсорних екранах. Якщо ви знаєте інші методи, пишіть про це в коментарях!