Эффект выделения информации средствами jQuery
Сегодня мы создадим специальный jQuery эффект для текста. Идея заключается в том, чтобы изменять прозрачность или цвет элементов, которые не относятся к тому или иному сегменту информации, который пользователи выбрали в соответствующем меню. Таким образом, мы позволим нашим посетителям сайта концентрировать внимание только на том, что их интересует.
В первую очередь мы должны определиться с тем, к каким элементам будем применять эффект, так же определиться хотим мы изменять цвет, прозрачность или все вместе. Тем элементам, которые будем изменять прозрачность, зададим класс “e-fade”, а тем которым будем менять цвет “e-color”. Помимо этого, вне зависимости от выбранного эффекта, каждому из этих элементов, припишем класс “effect”.
Пример использования классов в следующей html структуре:
<!—- Анимировать изменение цвета --> <h2 class="effect e-color">Custom effects with jQuery</h2> <!—- Анимировать изменение прозрачности --> <h2 class="effect e-fade">Custom effects with jQuery</h2> <!—- Анимировать и изменение цвета и прозрачности --> <h2 class="effect e-color e-fade">Custom effects with jQuery</h2>
В нашем примере мы будем использовать что-то наподобие меню для того, чтобы запустить анимацию. Как только мы наведём мышью на элемент меню, то выделится соответствующий сегмент текста.
Для того чтобы всё получилось, мы добавим ещё один класс, который позволит нам узнать к каким элементам не применять анимацию. Таким образом, мы сможем сконцентрироваться на всех остальных элементах.
Имя класса будет иметь такое же название как и ID для элементов списка. Таким образом мы создадим связь между этими двумя элементами:
<ul id="menu" class="menu"> <li><a href="#"><img src="/images/1.png" alt="1"/></a></li> <li><a href="#"><img src="/images/2.png" alt="2"/></a></li> <li><a href="#"><img src="/images/3.png" alt="3"/></a></li> <li><a href="#"><img src="/images/4.png" alt="4"/></a></li> <li><a href="#" id="effect-n"><img src="/images/5.png" alt="5"/></a></li> </ul> ... <h3 class="effect-n">Vapour around me</h3>
Как вы видите, последнему элементы мы приписали ID, а h3 содержит класс с точно таким же именем. Так что как только мышка покинет данный элемент, анимация сработает для всех остальных элементов.
Теперь возьмёмся за JavaScript.
Закэшируем некоторые элементы:
var $menu = $('#menu'), $container = $('#container'), $content = $container.find('.content');
Вместо того чтобы приписывать класс каждому элементу, мы сделаем это средствами jQuery:
$content .find('p') .addClass('effect e-fade') .end() .find('h1, h2, h3') .addClass('effect e-fade e-color');
Теперь мы выберем все элементы, которые относятся к классу “effect” и определим специальную функцию, которая будет отвечать за анимацию:
var $elems = $(document).find('.effect'), OverlayEffect = (function(){ //скорость анимации var speed = 1000, //по какому событию активировать эффект eventOff = 'mouseenter', //по какому событию дезактивировать эффект eventOn = 'mouseleave', //цвет, в который окрасить скрывающиеся заголовки colorOff = '#AAAAAA', //сохраняем оригинальный цвет заголовков, //и вызываем метод, который инициализирует события init = function() { $elems.each(function(){ var $el = $(this); if($el.hasClass('e-color')) $el.data('original-color',$el.css('color')); }); initEventsHandler(); }, //инициализируем события eventOff / eventOn initEventsHandler = function() { $menu .delegate('a',eventOff,function(e){ var relation = $(this).attr('id'); animateElems('off',relation); return false; }) .delegate('a',eventOn,function(e){ var relation = $(this).attr('id'); animateElems('on',relation); return false; }); }, //анимируем изменение цвета и / или прозрачности animateElems = function(dir,relation) { var $e = $elems; switch(dir){ case 'on' : //если присутствуют элементы с классом= relation //то они не будут анимированы if(relation) $e = $elems.not('.'+relation); $e.each(function(){ var $el = $(this), color = $el.data('original-color'), param = {}; if($el.hasClass('e-color')) param.color = color; if($el.hasClass('e-fade')) param.opacity = 1; $el.stop().animate(param,speed); }); break; case 'off' : if(relation) $e = $elems.not('.'+relation); $e.each(function(){ var $el = $(this), param = {}; if($el.hasClass('e-color')) param.color = colorOff; if($el.hasClass('e-fade')) param.opacity = 0.1; $el.stop().animate(param,speed); }); break; } }; return { init : init }; })(); OverlayEffect.init(); });
Вот и всё!
Надеюсь урок вам понравился!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/AiH8we1DDgM/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 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 » Интеграция с Яндекс Еда
- 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 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.