Управление всплывающей информацией
Изображения оживляют интерфейс веб проектов. Кроме того, при наведении курсора мыши на картинку может открываться дополнительная информация (например, автор изображения и ссылка на его блог). У этой, простой на первый взгляд, задачи, есть некоторые особенности, которые нужно учитывать при организации интерфейса.
Рассмотрим возможные варианты решения.
Условия
Допустим, у нас есть разметка, для которой надо организовать выведение информации с названием картинки и ссылкой при наведении курсора мыши на изображение:
<figure> <img src="/image.jpg" alt="Пример изображение"> <figcaption> <h3>Пример изображения</h3> <a href="http://ruseller.com">материалы проекта RUSELLER.COM</a> </figcaption> </figure>
Простое решение: используем CSS для скрытия и вывода названия
Используем <figcaption>
в качестве раздела для всплывающей информации. Скрываем его по умолчанию и выводим при наведении курсора мыши на изображение:
figcaption { display: none; } figure:hover figcaption { display: block; }
Просто, но слишком грубо. Смотрите на демонстрационной странице.
Используем затухание: трансформации CSS3
Можно воспользоваться продвинутыми методами CSS3:
figcaption { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } figure:hover figcaption { opacity: 1; }
Для достижения желаемого эффекта нужно настроить длительность перехода.
Но данный метод имеет свой недостаток: информация будет появляться, даже если курсор мыши быстро прошел над картинкой (в такой ситуации пользователь явно не заинтересован в получении дополнительного материала).
Используем HoverIntent
Если подключить JavaScript, можно сделать работу нашего блока более изящной. Плагин jQuery HoverIntent поможет предотвратить нежелательные события hover. Он задает небольшую задержку перед генерацией события, поэтому быстрое перемещение курсора мыши над объектом не приведет ни к каким действиям, а медленная проводка и остановка вызовет появление дополнительной информации.
Можно сделать так:
$("figure").hoverIntent(function() { $("figcaption", this).fadeTo(400, 1); }, function() { $("figcaption", this).fadeTo(400, 0); });
Используем doTimeout
HoverIntent отлично справляется с ситуацией быстрого прохода курсора мыши над изображением. Но если у нас есть несколько изображений, то перемещение между ними будет связано сзадержкой появления названия, что тоже не очень хорошо. Для предотвращения таких ситуаций можно воспользоваться плагином doTimeout. Однако код будет несколько сложнее:
var li_cache, over = false; $( "figure" ) .delegate( "figcaption", "mouseenter", function ( e ) { var $li = $( this ), speed; if ( li_cache === this && over ) { $.doTimeout( "hoverOut" ); return; } if ( over ) { $.doTimeout( "hoverOut", true ); speed = 0; } else { $.doTimeout( "hoverOut" ); speed = 500; } $.doTimeout( "hoverIn", speed, function () { over = true; $li.find( "div" ).fadeTo( 200, 1.0 ); }); }) .delegate( "figcaption", "mouseleave", function ( e ) { var $li = $( this ); $.doTimeout( "hoverIn" ); $.doTimeout( "hoverOut", 500, function () { over = false; $li.find( "div" ).stop( true ).fadeOut(); }); });
Название появляется спустя 0.5 секунды после наведения курсора на изображение. А если передвинуть курсор мыши на другое изображение, то название появится сразу. Смотрите демонстрацию для примера 4.
Теперь информационный блок появляется так естественно, что сложность кода окупается.
Заключение
Как видите, совершенству нет предела.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/4nPp_AY0RM8/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.