Свежие решения
для вашего бизнеса
узнать больше

Переходим с Flash на jQuery

Переходим с Flash на jQuery

Введение

Abode Flash — технология, которая позволяет внедрять вставку в HTML-страницу.

По своей сути это чужеродный элемент на странице и появился он вовсе не от хорошей жизни, а как альтернатива базовым возможностям HTML и JavaScript, которых на момент появления флеша не хватало, чтобы раскрыть весь творческий замысел создателей сайта.

С появлением последних браузеров ситуация изменилась и практически все возможности флеша могут быть реализованы в родной связке HTML-JavaScript.

Такой подход будет имеет множество плюсов:

Полная совместимость со всеми современными графическими браузерами

Использование связки HTML и JavaScript не влечет проблем с совместимостью с различными современными устройствами.

Использование технологии Flash требует установки дополнительного программного обеспечения, которое может не поддерживаться некоторыми устройствами (iPad, например). Следовательно, сайт, содержащий флеш-вставки не откроется на iPad, а если флеш отключен, то вместо сайта мы можем не увидеть вообще ничего. Вот, к примеру, сайт крупной дизайн-студии в ситуации, когда флеш-плеер недоступен:

Он просто ничего не отображает. В неприятную ситуацию попадают также те, кто делает вставки в виде флеша (например, флеш-логотип или флеш-меню):

Полная совместимость с поисковыми машинами

Использование текста и изображений во флеш-роликах никак не скажется на поисковой оптимизации и продвижении сайта, поскольку такой текст не попадет в поисковые системы.

Поисковая машина просто проиндексирует вместо нормального текста только заголовок страницы и возможно мета-теги с описанием и ключевыми словами, а основное содержание сайта с точки зрения поисковой системы может составлять всего пару строк со ссылкой на флеш-объект.

Использование HTML в связке с JavaScript лишено этой проблемы, поскольку текст успешно индексируется поисковыми системами целиком и сайт продвигается нормально.

Удобство в плане дальнейшей поддержки

Технически флеш-ролик представляет собой нечитаемый код, в котором практически невозможно ничего поменять:

HTML в связке с JavaScript может меняться и дорабатываться несколькими разработчиками и тут же запущен в работу.

Также среди плюсов отмечается лучшая производительность и идеологически верная инженерная конструкция, которая подразумевает отказ от использования чужеродных элементов или плагинов.

Перевод флеш-элементов сайта ЗАО «ПО „Одинцово“» на jQuery

Две недели назад за поддержкой в студию обратись компания-производитель дверей ЗАО «ПО „Одинцово“».

На одном из сайтов компании имелась флеш-ставка, которая требовала доработки и замены. По требуемому сценарию несколько изображений дверей, должны были появляться в случайном порядке, а замет выстраиваться в ряд. При наведении курсора мышки изображение двери увеличивалось:

На сайте уже существует флеш-вставка, которая делает тоже самое. Ее размер 8,3 килобайт. Убираем ее и пишем все на jQuery.

Для начала выводим картинки в том формате, с которым нам будет удобно работать. В итоге получаем удобный список:

 <div class="door_image_item">
        <a title=РОМА 01" href="http://dveri-casaporte.ru/catalog.php?id=1">
        <img height="140px" src="ROMA/1-1-1.jpg">
        </a>
        <p>
            01
        </p>
    </div>
    <div class="door_image_item">
        <a title=РОМА 02" href="http://dveri-casaporte.ru/catalog.php?id=2">
        <img height="140px" src="ROMA/2-1-1.jpg">
        </a>
        <p>
            02
        </p>
    </div>

Накладываем на него соответствующий стиль, подключаем jQuery и пишем всего несколько строк кода:


		/**
		 * Функция, чтобы удобней было работать со случайными числами
		 * 
		 */
		function getRandomInt(min, max)
		{
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		
		$(document).ready (function ()
		{	
			// Минимальная ширина элемента-картинки
			min_width = 58; 
			
			// Минимальная высота элемента-картинки
			min_height = 140
			
			// Максимальная ширина элемента-картинки (при наведении курсора на элемент)
			max_width = 75;
			
			
			// Максимальная высота элемента-картинки (при наведении курсора на элемент)
			max_height = 180;
			
			// Продолжительность анимации наведения на дверь (одна-четвертая секунды)
			duration = 250;
			
			// Скрываем картинки
			$('#flash1 > div > div.door_image_item').hide ();
			$('#flash1 > div > div.door_image_item').each (function (e)
			{
				after_label = $(this).find ('a').attr ('title').split (' ');
				
				after_label = after_label[1];
				$(this).find ('a').after('<p>' + after_label + '</p>');
				
				// Показываем с эффектом выцветания, задаем разную продложительности
				$(this).fadeTo (getRandomInt(250, 700), 1);
				
				// Присваиваем разный лефт, а потом ставим на свои места
				$(this).css ({left: getRandomInt(-500, 500) + 'px'});
				$(this).animate({
					left: 0 + 'px'
				  }, 700);
			});
			
			// При наведении мышки на элемент анимировано увеличиваем
			$('#flash1 img').mouseover (function ()
			{
				$(this).addClass ('active_door_item');
				$(this).parent ('a').eq (0).parent ('div').eq (0).find ('p').animate ({fontSize: 12, width: max_width}, duration);
				$(this).parent ('a').eq (0).parent ('div').eq (0).animate ({top: (min_height - max_height)/2, left: (min_width - max_width)/2}, duration);
				$(this).animate({
					width: max_width,
					height: max_height
				  }, duration);
			});
			
			
			// Возвращаем на место
			$('#flash1 img').mouseout (function ()
			{
				
				$(this).removeClass ('active_door_item');
				$(this).animate({
					width: min_width,
					height: min_height,
					top: 0
				  }, duration, function() {
					// Animation complete.
				  });
				  
				$(this).parent ('a').eq (0).parent ('div').eq (0).find ('p').animate ({fontSize: 9, width: min_width}, duration);
				$(this).parent ('a').eq (0).parent ('div').eq (0).animate ({top: 0, left: 0}, duration);
			});
		});

Вот как это работает: http://dveri-casaporte.ru/catalog.php

Чего мы добились:

  1. Список дверей теперь успешно индексируется поисковыми системами.
  2. Заметно возросла производительность и скорость загрузки.
  3. Список может редактироваться через систему управления сайтом.
  4. Эффект легко может быть доработан и скорректирован.
  5. Отображается на любых современных устройствах и в любых современных графических браузерах.

© Буков Сергей, 26 января 2012