Выскальзывающие символы с использованием jQuery
В данном уроке мы сделаем отличный эффект для сайта. Оживим мир ссылок. Сделаем так, чтобы символы менялись один за другим при наведении курсора мыши на ссылку. Можно использовать тоже слово, а можно заменить новыми символами.
В уроке используется плагин jQuery Lettering.js.
В демонстрационном примере используется меню, которое состоит из таких ссылок:
<div class="sl_examples"> <a href="#" id="example1" data-hover="Фантазия">Иллюстрации</a> <a href="#" id="example4">Коллекции</a> </div>
Используется атрибут data-hover
для индикации слова, которое должно появиться при наведении курсора мыши. Если его нет, то будет изменяться тоже самое слово, которое используется в ссылке.
Для воспроизведения эффекта используются следующие стили:
.sl_examples{ float:left; font-family: 'EB Garamond', arial, serif; font-size:50px; line-height:50px; color:#f0f0f0; margin-right:5px; text-transform:uppercase; } .sl_examples a{ display:block; position:relative; float:left; clear:both; color:#fff; } .sl_examples a > span{ height:50px; float:left; position:relative; overflow:hidden; } .sl_examples a span span{ position:absolute; display:block; left:0px; top:0px; text-align:center; } .sl_examples a span span.sl-w1{ color:#fff; text-shadow:0px 0px 1px #fff; z-index:2; } .sl_examples a span span.sl-w2{ color:#e82760; text-shadow:-1px 1px 2px #9f0633; z-index:3; }
Класс “sl-w1″ - для символов первого слова, а “sl-w2″ - для символов второго слова.
Нужно также вызывать плагин:
$(window).load(function(){ $('#example1').hoverwords({ delay:50 }); });
Используются следующие установки для плагина (их можно поменять, передав новые значения при вызове):
delay : false, // каждый символ использует различное время анимации speed : 300, // скорость анимации easing : 'jswing', // эффект анимации dir : 'leftright', // направление выскальзывания символа: leftright - слева направо || rightleft - справа налево, overlay : false, // выскальзывающее слово появляется поверх текущего opacity : true // анимация прозрачности символов
А полный код плагина выглядит следующим образом:
/* Плагин hoverwords */ (function($) { var aux = { toggleChars : function($el, settings) { var $wrappers = $el.find('.sl-wrapper'), total = $wrappers.length, c1 = $el.hasClass('sl-w1') ? 'sl-w2' : 'sl-w1', c2 = $el.hasClass('sl-w1') ? 'sl-w1' : 'sl-w2'; $el.addClass(c1).removeClass(c2); $wrappers.each(function(i) { var $wrapper = $(this), interval; switch(settings.dir) { case 'leftright' : interval = i * settings.delay; break; case 'rightleft' : interval = (total - 1 - i) * settings.delay; break; }; if(settings.delay) { setTimeout(function() { aux.switchChar($wrapper, $el, settings, c1, c2); }, interval); } else aux.switchChar($wrapper, $el, settings, c1, c2); }); }, switchChar : function($wrapper, $el, settings, c1, c2) { var $newChar = $wrapper.find('span.' + c1), $currentChar = $wrapper.find('span.' + c2), nextWrapperW = $currentChar.width(); if($newChar.length) nextWrapperW = $newChar.width(); //Новый символ добавляется if($newChar.length) { var param = {left : '0px'}; if(!$.browser.msie && settings.opacity) param.opacity = 1; $newChar.stop().animate(param, settings.speed, settings.easing); //анимация для ширины контейнера $wrapper.stop().animate({ width : nextWrapperW + 'px' }, settings.speed); } //Текущий символ убирается if(!settings.overlay || c1 === 'sl-w1') { if(settings.dir === 'leftright') var param = {left : -$currentChar.width() + 'px'}; else var param = {left : nextWrapperW + 'px'}; if(!$.browser.msie && settings.opacity) param.opacity = 0; $currentChar.stop().animate(param, settings.speed, settings.easing); } } }, methods = { init : function(options) { if(this.length){ var settings = { delay : false, // каждый символ использует различное время анимации speed : 300, // скорость анимации easing : 'jswing', // эффект анимации dir : 'leftright', // направление выскальзывания символа: leftright - слева направо || rightleft - справа налево, overlay : false, // выскальзывающее слово появляется поверх текущего opacity : true // анимация прозрачности символов }; return this.each(function(){ // Объединение заданных опций со значениями по умолчанию if ( options ) { $.extend( settings, options ); } var $el = $(this).addClass('sl-w1'), word = $el.data('hover') || $el.html(); // Если атрибут data-hover установлен, используем заданное слово, иначе используем текущее слово if($el.data('hover')) settings.overlay = false; // Опция используется только для случая одного и того же слова $el.lettering(); // используем плагин lettering.js var $chars = $el.children('span').addClass('sl-w1'), $tmp = $('<span>' + word + '</span>').lettering(); $chars.each(function(i) { var $char = $(this); $char.wrap( $('<span/>').addClass('sl-wrapper') ) // Устнавливаем контейнер с классом для каждого символа и ширину контейнера равной ширине символа .parent().css({ width : $char.width() + 'px' }); }); $tmp.children('span').each(function(i) { var $char = $(this), $wrapper = $el.children('.sl-wrapper').eq(i); if($wrapper.length) // Проверяем наличие контейнера для вставки символа $wrapper.prepend( $char.addClass('sl-w2') ); else { // Если его нет, создаем $el.append( $('<span class="sl-wrapper"></span>').prepend( $char.addClass('sl-w2') ) ); $char.parent().css({ width : $char.width() + 'px' }); } if(!$.browser.msie && settings.opacity) $char.css('opacity', 0); // "скрываем" символ if(settings.dir === 'leftright') $char.css('left', - $char.width() + 'px'); else $char.css('left', $char.parent().width() + 'px'); }); // События mouseenter / mouseleave - переключаемся на другое слово $el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) { aux.toggleChars($el, settings); }); }); } } }; $.fn.hoverwords = function(method) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Метод ' + method + ' не существеут в плагине jQuery.hoverwords' ); } }; })(jQuery);
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/8nieFQulp7U/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 контейнере
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.