Плавная замена одного изображения другим с использованием спрайта 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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 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 » Интеграция с Яндекс Еда
Тому, кто способен укротить свое сердце, покорится весь мир. (Пауло Коэльо / СИЛА ВОЛИ ) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp