Эффект выделения информации средствами 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-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 контейнере
"Если технология меняется почти каждый день, нет смысла нанимать человека потому, что он обладает специфическим набором профессиональных навыков - все равно эти навыки скоро устареют. Вам нужно стараться принимать на работу людей, которые обладают широкими универсальными способностями к решению проблем, каким бы трудным это ни оказалось." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.