Плавная замена одного изображения другим с использованием спрайта CSS
Использование смены изображений очень легко выполнить с помощью CSS. Задаем элементу фоновое изображение, а затем в его псевдо элементе :hover
изменяем background-image
. Самым лучшим способом будет совмещение обоих изображений в одно и использование сдвига в background-position.
Такая техника называется спрайтом CSS. А если нам нужно плавно заменять одно изображение на другое без резких сдвигов?
Решение задачи заключается в использовании дополнительного элемента поверх оригинала с нулевым значением свойства opacity
и значением свойства background-position,
установленным в нужное значение. Затем в псевдо элементе :hover
плавно изменяем прозрачность. Есть три метода сделать указанное действие. Покажем на примере маленькой стрелочки.
Поместим элемент span
в оригинальный элемент. Данный элемент span
будет отображать активированное состояние. Да, излишняя разметка - плохо, но нам нужен дополнительный элемент, а псевдо элемент не поддерживает переходы в большинстве браузеров.
<a href="#" class="arrow">Стрелочка<span></span></a>
Стрелка использует замещение изображений CSS и расположение фона в позицию по умолчанию.
.arrow { display: inline-block; position: relative; text-indent: -9999px; width: 36px; height: 36px; background: url(sprites.png) no-repeat; }
Здесь используется относительное позиционирование для элемента span
, который будет позиционироваться абсолютно с тем же самым размером. Положение фона будет сдвигаться на место для смены изображений. Его прозрачность устанавливается в ноль и будут использоваться трансформации CSS3 для размещения его на место.
.arrow span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(sprites.png) no-repeat; background-position: -50px 0; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; }
Затем при активации элемента изменяется прозрачность:
.arrow:hover span { opacity: 1; }
Способ второй (на пике технологий)
Единственная причина, по которой мы используем элемент span -
на момент написания урока только Firefox 4 поддерживал трансформации для псевдо элементов. Логично предполагать, что в будущем WebKit и другие браузеры также будут их поддерживать. Мы можем изменить разметку следующим образом:
<a href="#" class="arrow">Стрелочка</a>
А код CSS практически такой же, только мы используем :after
вместо span:
.arrow:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(sprites.png) no-repeat; background-position: -50px 0; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .arrow:hover:after { opacity: 1; }
Способ третий (поддерживаем наработки)
Некоторые браузеры не поддерживают ни псевдо элементы, ни трансформации. Если нужно сохранить кросс-браузерность приложения, то придется использовать избыточную разметку HTML и полагаться на JavaScript (jQuery...). Снова возвращаемся к элементу span.
<a href="#" class="arrow">Стрелочка<span></span></a>
Код CSS почти такой же, как и для выше обозначенных методов, но существенно упрощен, так как мы не используем псевдо классы и трансформации.
.arrow { display: inline-block; position: relative; text-indent: -9999px; width: 36px; height: 36px; background: url(sprites.png) no-repeat; } .arrow span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(sprites.png) no-repeat; background-position: -50px 0; }
jQuery будет управлять затуханием. Сначала мы скрываем элемент span
, затем присоединяем функции для обработки событий mouseenter
и mouseleave
через функцию hover
для реализации затухания.
$(function() { $(".arrow3") .find("span") .hide() .end() .hover(function() { $(this).find("span").stop().fadeIn(); }, function() { $(this).find("span").stop().fadeOut(); }); });
Все три способа использованы на странице демонстрации.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/bbGJSGdCYkc/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.