Оживляем сайт jQuery-анимацией в шапке сайта. Мой опыт

Согласитесь, что если на сайте есть гармоничные «двигающиеся» элементы, то сайт выглядит немного более живым и тем самым - более привлекательным. Я считаю, что у любого сайта должна быть визуальная «изюминка». Пусть небольшая, но должна быть. Ещё лучше, если эта «изюминка» будет вызывать «Вау!-эффект» у посетителей. Ну, или должна привлекать и задерживать на себе взгляд серфера. В этой публикации я хочу рассказать о своей работе над «изюминкой» сайта компании «АББ-ЩИТ» и поделиться программным кодом реализации анимации. Суть «изюминки» вы можете видеть уже сейчас на следующей картинке:

Шапка сайта в таком виде появилась случайно. Первоначально я задумывал и предлагал клиенту использовать в шапке галерею изображений с эффектом аккордеона. Из всей массы перебранных jQuery-эффектов этот, на мой взгляд, подходил больше всего. Однако директор компании проявил творческий подход и принял решение разместить в шапке сайта в качестве основы - красивую фотографию города. Без «непонятного аккордеона».

Фото нашлось и купилось относительно быстро. Однако далее встала в полный рост проблема реализации блока ссылок на страницы основных услуг компании. В основное меню, по понятным причинам (мало места), втиснуть ссылки было нельзя. Выпадающее меню (при наведении мышки на пункт «Услуги» основного горизонтального меню должно появляться-выпадать дополнительное вертикальное меню) заказчик посчитал неприемлемым в виду «малозаметности». В то время, как на услугах хотелось бы акцентировать внимание посетителя.

И вот глядя то на аккордеон, то на фото города, мне пришла мысль попробовать разбить фото города на пять частей и сделать каждую часть ссылкой. Плюс к этому, логичным показалось выводить над фото название услуги, соответствующее фрагменту фотографии. В таком виде была заказана вёрстка html-шаблона. Верстальщик предложил реализовать требуемой с помощью тэгов <map> и <area>. Для карты получился примерно следующий CSS+jQuery+html-код:

<style>
.header_right {
    position:relative; 
    float:right; 
    width:693px; 
    padding:0 7px 7px 0;
    text-align:center; 
    font-weight:bold; 
    font-size:12px; 
    color:#fff;
}
.header-text {height:21px; line-height:18px;}
img.layer {position:absolute; right:7px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
    $(".imglink").mousemove(function() {
            $('.services_name').text($(this).attr('alt'));
    });
});
</script>
<div class="header_right">
 <div class="header-text">читать подробнее об услугах:<span class="services_name"></span></div>
 <img src="/images/layer.png" class="layer" width="689" height="249" usemap="#shapes">
 <map name="shapes">
  <area shape="rect" coords="0,0,135,248" href="/page/1.html" alt="пультовая охрана">
  <area shape="rect" coords="139,0,270,248" href="/page/2.html" alt="физическая охрана стационарных объектов">
  <area shape="rect" coords="275,0,413,248" href="/page/3.html" alt="личная охрана">
  <area shape="rect" coords="418,0,551,248" href="/page/4.html" alt="сопровождение грузов">
  <area shape="rect" coords="556,0,688,248" href="/page/5.html" alt="охрана мероприятий">
 </map>
 <img src="/images/city.jpg" class="img-header" width="689" height="249"  alt="">
</div>

Здесь приведён не весь код, а только значимая часть для иллюстрации идеи. Думаю, что этого фрагмента кода вполне достаточно для понимания задумки. Пожалуй, только следует пояснить присутствие файла 'layer.png'. Эта картинка реализовывала визуальное разбиение фотографии города на 5 частей с помощью наложения узеньких полосок. Если слова не проясняют ситуацию, то просто взгляните на сами картинки:

Второй файл 'layer-2.png' был нужен для обхода «особенности» отображения прозрачных картинок в IE6.

Такой вариант реализации «изюминки», которая бы привлекала внимание, работал. Но мучила мысль, что «этого мало». Поэтому была проведена длинная череда экспериментов с различным сочетанием эффектов, которые прошиты в библиотеке jQuery. Ничего толкового не получилось - выяснилось, что на карту (<map> ) не применимы большинство эффектов. За всю веб-мастерскую жизнья с html-картами я практически не работал и поэтому не знал о такой особенности, а следовательно - пришлось проделать такой длинный путь. В конце концов, я принял решение поступить менее технологичным, но зато гарантированно рабочим методом (а скорее всего вообще единственно возможным) - разрезать картинку на отдельные кусочки и попробовать прикладывать эффекты уже к ним, в поиске наиболее интересного сочетания.

Так появился следующий html-код и картинки:

<script type="text/javascript">
$(document).ready(function() {
    $(".tbl-header").fadeswitcher({});
});
</script>
<div class="header_right">
 <div class="header-text"><span class="services_name"></span></div>
  <table border=0 cellspacing=0 cellpadding=0 width=689 class="tbl-header">
   <tr>
    <td><a href="/page/pult"><img src="/uploads/header_photos/block1.png"
         alt="пультовая охрана" class="imglink"></a>
    <td><img src="/uploads/header_photos/line1.png" alt="line1">
    <td><a href="/page/buildprotect"><img src="/uploads/header_photos/block2.png" 
         alt="физическая охрана стационарных объектов" class="imglink"></a>
    <td><img src="/uploads/header_photos/line2.png" alt="line2">
    <td><a href="/page/bodyguard"><img src="/uploads/header_photos/block3.png" 
         alt="личная охрана" class="imglink"></a>
    <td><img src="/uploads/header_photos/line3.png" alt="line3">
    <td><a href="/page/cargoescort"><img src="/uploads/header_photos/block4.png" 
         alt="сопровождение грузов" class="imglink"></a>
    <td><img src="/uploads/header_photos/line4.png" alt="line4">
    <td><a href="/page/eventprotect"><img src="/uploads/header_photos/block5.png" 
         alt="охрана мероприятий" class="imglink"></a>
   </tr>
  </table>
</div>

Из приведённого html-кода видно, что основной функционал, который реализует визуальный эффект, был вынесен в jQuery плагин fadeswitcher:

(function($){
$.fn.fadeswitcher = function(options){
 return this.each(function(){
  options = $.extend({
    name :   'fadeswitcher',
    imgclass :  '.imglink',
    altcopy :  true,
    altcopyclass : '.services_name',
    speed:   500,
    times:   2, // сколько раз мигать
    timeout:  3000,
    autorun:  true
   },options);
  var $this = $(this), 
   current = -1, 
   intervalID = 0,
   altto = $(options.altcopyclass),
   pics = $(options.imgclass),
   count = pics.length - 1,
   run = false,
   methods = {
    init: function(){
     pics.stop(true,true).show();// делаем всех видимыми
      
     $this.bind('mousemove.fadeswitcher',function(){
      methods.stop();
     });
      
     $this.bind('mouseleave.fadeswitcher',function(){
      methods.start();
     });
     pics.bind('mouseleave.fadeswitcher',function(){
      altto.text('');
     });
     pics.bind('mousemove',function(){
      var txt = $(this).attr('alt');
      $(options.altcopyclass).text( txt );
     });
     if(options.autorun) methods.start();
    },
    start: function(){
     intervalID = setInterval(function(){methods.next();},options.timeout);    
     run = true;
    },
    stop: function(){
     if(run){ 
      altto.text('');
      clearInterval(intervalID);
     }
     pics.show();
     run = false;
    },
    next: function(){
     altto.text('');
     current++;
     if(current >= count) current = -1;
     altto.text( pics.eq(current).attr('alt') );
     pics.eq(current).show("pulsate", {times: options.times}, options.speed);
    }
   };
  methods.init();
 });
};
})(jQuery);

Исходный код jQuery-плагина доступен для скачивания:

Скачать код jQuery-плагина «попеременного затухания элементов шапки сайта»⁵⁴
ZIP (1,04 Кб).

Суть работы плагина сводится к циклическому последовательному переходу от одного фрагмента фотографии к другому. При переходе на следующий фрагмент происходит изменение подписи над фотографией на соответствующую текущему фрагменту. Также к текущему фрагменту применяется эффект визуального затухания с последующим обратным проявлением - pulsate (jQuery). Цикл прерывается, если курсор мышки оказался в области фотографии. Возобновляется цикл при выходе мышиного курсора за пределы области с фотографией. Фрагменты собираются в единую фотографию с помощью таблицы (table). Можно было сделать с помощью div. Но после эпикфейла с map почему-то потянуло использовать проверенные годами приёмы верстки.

Демонстрацию работы данного кода можно увидеть на сайте компании АББ-ЩИТ. Код достаточно очевидный и думаю, что сейчас нет смысла ещё более детально разбирать логику его работы - программисты и так разберутся. Если же у вас всё же возникнут вопросы, то смело задавайте их в комментариях - отвечу (по мере сил и свободного времени). Очень интересуют идеи и предложения по улучшению алгоритма реализации визуального эффекта. Не каждый день занимаюсь разработкой визуальных эффектов на jQuery и поэтому мог что-то упустить или не знать какого-нибудь трюка. Также буду благодарен, если в комментариях вы выскажете своё общее мнение об описанном варианте решения проблемы привлечения внимания к важным элементам сайта.