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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree