Делим кузов автомобиля на элементы с помощью jquery

jquery

От автора: на работе мы общались с клиентом, который пришёл к нам за сайтом. Клиент тот занимается продажей элементов кузовов автомобилей и их комплектующих. В процессе общения ко мне в голову ломанулась идея интересного виджета для его сайта.

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

скачать исходникидемо

Задача

Результат разработки должен подарить нам следующие красивости:

результат

Результат разработки должен подарить нам следующие красивости:

вверху страницы, над изображением должны находится ссылки с названиями элементов кузова, при на ведении на которые соответствующий элемент становится чётким, а остальное полупрозрачным;

при наведении на автомобиль, указанный курсором элемент также становится чётким, а остальные полупрозрачными. А так же подсвечивается ссылка сверху, с названием указанного элемента.

Подготовка необходимого материала

Для начала нам надо подготовить машину и её запчасти. Я выбрал BMW m3… Не дано такой обзавестись, ну хоть поиздеваюсь.

:)

Я взял фото автомобиля с фронтального ракурса.

BMW

Теперь делим на элементы.

В фотошопе при помощи инструмента «магнитное лассо» или «прямолинейное лассо» аккуратно вырезаем элемент кузова по шву, копируем и вставляем в новом слое. Если вставилось не ровно, сделайте этот слой полупрозрачным и передвигайте элемент, пока не совпадёт с машиной, потом верните слою полную непрозрачность.

Так слой за слоем сделайте все элементы. Если сделать слой с машиной невидимым, то должно получиться что-то на подобии этого:

BMW

Теперь делаем все слои прозрачными, кроме одного из элементов. Сохраняем для web в формате png-24. Затем следующий элемент и т.д.

Получаем вот такие картинки:

BMW

BMW

BMW

BMW

BMW

BMW

Начнём монтаж кузова!

Метод

1. Вёрстка

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

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

Затем, поверх всех элементов нужно разместить ссылки. Сложность состоит в том, как эти ссылки разместить над соответствующими элементами?

Это не проблема! Начнём с того, что зададим этим ссылкам блочное отображение и абсолютное позиционирование. Затем отрегулируем их положение и размеры.

План DOM

BMW

2. Анимация

Наш скрипт должен реагировать на наведение курсора на салку сверху так: изменяет стили этой ссылки, выдёргивает содержание её атрибута rel, находит по id див элемента кузова, в соответствии с атрибутом rel ссылки. Затем найденный див он проявляет с помощью fadeIn(). В то же время див с машиной становится полупрозрачным. Когда курсор уходит со ссылки, все изменённые элементы возвращают исходное состояние.

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

Реализация

1. HTML

Сейчас я покажу готовый html нашей страницы. В нём уже откалиброваны ссылки над машиной. Затем я покажу, как их можно удобно расставлять.

<!-- Голова - начало документа -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title>BMW m3</title>

	<meta http-equiv="Content-Type" content="; charset=utf-8" />	

<!-- Подключаем стили -->
	<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
	<!-- Подключаем jQuery -->
    <script src="js/jquery.js" type="text/javascript"></script>
	<!-- Подключаем наш скрипт -->
    <script src="js/js.js" type="text/javascript"></script>
</head>
<body>
<!-- Вся страница -->
<div class="all" align='center'>
<!-- Див с навигацией -->
<div class="nav">
       <!-- ссылка на бампер -->
	<a href="" class="link" rel="bam">бампера</a>
	<!-- ссылка на фары -->
	<a href="" class="link" rel="lamp">фары</a>
	<!-- ссылка на капоты -->
	<a href="" class="link" rel="kapot">капоты</a>
	<!-- ссылка на крылья -->
	<a href="" class="link" rel="krilo">крылья</a>
	<!-- ссылка на рубаху -->
	<a href="" class="link" rel="rot">рубахи</a>
	<!-- ссылка на зеркала -->
	<a href="" class="link" rel="ref">зеркала</a>

</div>
    <!-- Див с машиной -->
	<div class="slide">
         <!-- Машина целиком -->
		<div class="item" id="car"></div>
		<!-- Фары -->
		<div class="item" id="lamp"></div>
		<!-- капот -->
		<div class="item" id="kapot"></div>
		<!-- Бампер -->
		<div class="item" id="bam"></div>
		<!-- зеркала -->
		<div class="item" id="ref"></div>
        <!-- Рубашка радиатора -->
		<div class="item" id="rot"></div>
		<!-- Крылья -->
		<div class="item" id="krilo"></div>
	    <!-- Див с навигационной картой ссылок по верх картинки -->
		<div class="nav1">
		 <!-- ссылка на бампер -->
	     <a href="" style="height:190px; margin-left:62px; margin-top:224px; width:574px;" class="link1" rel="bam"></a>
		 <!-- ссылка на правое крыло (относительно машины) -->
	     <a href="" style="height:61px; margin-left:555px; margin-top:164px; width:75px;" class="link1" rel="krilo"></a>
		 <!-- ссылка на левое крыло (относительно машины) -->
	     <a href="" style="height:58px; margin-left:66px; margin-top:168px; width:74px;" class="link1" rel="krilo"></a>
		 <!-- ссылка на капот -->
		  <a href="" style="height:102px; margin-left:132px; margin-top:137px; width:435px;" class="link1" rel="kapot"></a>
		  <!-- ссылка на правую фару (относительно машины) -->
	     <a href="" style="height:45px; margin-left:98px; margin-top:223px; width:107px;" class="link1" rel="lamp"></a>
		 <!-- ссылка на левую фару (относительно машины) -->
	     <a href="" style="height:48px; margin-left:489px; margin-top:222px; width:109px;" class="link1" rel="lamp"></a>
		 <!-- ссылка на правое зеркало (относительно машины) -->
	     <a href="" style="height:35px;  margin-left:542px; margin-top:118px; width:71px;" class="link1" rel="ref"></a>
		 <!-- ссылка на левое зеркало (относительно машины) -->
	     <a href="" style="height:37px; margin-left:95px; margin-top:118px; width:62px;" class="link1" rel="ref"></a>
		 <!-- ссылка на рубаху -->
		 <a href="" style="height:56px; margin-left:236px; margin-top:230px; width:225px;" class="link1" rel="rot"></a>




       </div>
	</div>
</div>
</body>
</html>

HTML структура у нас есть, теперь надо описать стили объектов.

/* убиваем отступы */
*
{
margin:0px;
padding:0px;
}

/* главный div страницы */
.all
{
width:100%;
}
/* div отображающий машину и элемненты кузова */
.slide
{
margin-top:50px;
width:700px;
height:530px;
padding:20px;
box-shadow:0px 0px 20px #ccc;
-webkit-box-shadow:0px 0px 20px #ccc;
-moz-box-shadow:0px 0px 20px #ccc;
}
/* элемент */
.item
{
position:absolute;
width:700px;
height:530px;
display:none;
}
/* машина */
#car
{
display:block;
background:url(img/car.png);
}
/* фары */
#lamp
{
background:url(img/lamp.png);
}
/* крылья */
#krilo
{
background:url(img/krilo.png);
}
/* капот */
#kapot
{
background:url(img/kapot.png);
}
/* рубашка радиатора */
#rot
{
background:url(img/rot.png);
}
/* зеркала */
#ref
{
background:url(img/ref.png);
}
/* бампер */
#bam
{
background:url(img/bam.png);
}
/* див с навигацией сверху */
.nav
{
margin-top:50px;
}
/* ссылка в навигации сверху */
.link
{
display:inline-block;
padding:10px;
background:#00baff;
color:#fff;
text-decoration:none;
font-family:Arial;
font-size:16px;
font-weight:bold;
}


/* ссылка над машиной */
.link1
{
display:block;
background:none;
position:absolute;
text-decoration:none;
color:#878787;
font-family:Arial;
font-size:16px;
font-weight:bold;
}

Теперь разберёмся, как калибровать ссылки над машиной

Начнём с того, что у нашего кузова фары и решётка радиатора находятся в бампере, исходя из этого и учитывая, что ссылки у нас блочные – прямоугольной формы, нетрудно догадаться какие уровни должны занимать определённые ссылки по оси z. В приложенном примере приложения ссылки уже расставлены в нужном порядке, но я всё равно акцентирую Ваше внимание на этой детали, так как это пригодится при применении приложения с альтернативными объектами (может с другой машиной или системным блоком и т.д.).

Как проще откалибровать ссылки?

ля ведущих браузеров есть весьма комфортное решение:

Google chrome – firebug: https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench?hl=ru
Mozilla FF – firebug: https://addons.mozilla.org/ru/firefox/addon/firebug/
Opera – dragonfly: http://www.opera.com/dragonfly/

Эти утилиты помогут проинспектировать вёрстку и стили вашей страницы в режиме просмотра, а так же изменять её и прослеживать результат этих изменений во время просмотра.

Рассмотрим процедуру калибровки на примере firebug

Во-первых, нам надо временно всем ссылкам сделать бордер красного цвета, чтобы видеть его положение и размеры.

Затем, после установки firebug, мы запускаем его во время просмотра нашей страницы. (У мозилы он запускается нажатием на маленького жука в нижнем, правом углу браузера, а у хрома такой же жук, только среди других расширений вверху браузера, справа от адресной строки. В случае с оперой, драгонфлай запускается так: правым кликом по элементу страницы, выбираем «проинспектировать элемент» или «inspect element»).

Находим нашу ссылку в dom или выбираем её при помощи «inspect» вверху панели firebug.

Справа отображаются стили инспектируемого объекта, которые можно изменять и тут же видеть результат. Вот мы и будем передвигать и изменять размеры ссылки.

BMW

До тех пор, пока наша ссылка не будет над элементом кузова.

BMW

После калибровки, выделяем стили в firebug, копируем и вставляем в атрибут style редактируемой ссылки.

По такому принципу калибруем все ссылки.

BMW

Затем убираем бордеры.

Верстка закончена, дело за анимацией.

JavaScript

В разделе «Метод», этой статьи описан принцип работы скрипта. В самом скрипте прокомментировано каждое событие и действие. Внимательно изучаем!

$(document).ready(function() { // проверяем загружен ли DOM

$('.link').hover(function() { // Событие - наведение курсора на ссылку в навигации
var theid = $(this).attr('rel'); // выдёргиваем rel
$('#car').stop().fadeTo(500, 0.4); // машину делаем полупрозрачной
$("#" + theid).stop().fadeTo(500, 1); // элемент с id равному нашему rel, делаем непрозрачным
// Меняем стили ссылки, на которую навели курсор
$(this).css({'background':'#45cdff','box-shadow':'0px 0px 20px #ccc','-webkit-box-shadow':'0px 0px 20px #ccc','-moz-box-shadow':'0px 0px 20px #ccc'});
},
function() { // Событие - уход курсора от ссылки в навигации
var theid = $(this).attr('rel'); // выдёргиваем rel
$('#car').stop().fadeTo(500, 1); // машину на исходную
$("#" + theid).stop().fadeTo(500, 0); // прячим элемент с id равным нашему rel
// Возвращаем исходные стили ссылки, на которую наводили курсор
$(this).css({'background':'#00baff','box-shadow':'0px 0px 0px #ccc','-webkit-box-shadow':'0px 0px 0px #ccc','-moz-box-shadow':'0px 0px 0px #ccc'});
}
);

$('.link1').hover(function() { // Событие - наведение курсора на ссылку над машиной
var theid = $(this).attr('rel'); // выдёргиваем rel
// Меняем стили ссылки в навигации, с таким же rel как и у ссылки, на которую навели курсор
$('.link:[rel=' + theid + ']').css({'background':'#45cdff','box-shadow':'0px 0px 20px #ccc','-webkit-box-shadow':'0px 0px 20px #ccc','-moz-box-shadow':'0px 0px 20px #ccc'});
$('#car').stop().fadeTo(500, 0.4); // машину делаем полупрозрачной
$("#" + theid).stop().fadeTo(500, 1); // элемент с id равному нашему rel, делаем непрозрачным
},
function() { // Событие - уход курсора от ссылки над машиной
var theid = $(this).attr('rel'); // выдёргиваем rel
// Возвращаем исходные стили ссылки в навигации, с таким же rel как и у ссылки, на которую навели курсор
$('.link:[rel=' + theid + ']').css({'background':'#00baff','box-shadow':'0px 0px 0px #ccc','-webkit-box-shadow':'0px 0px 0px #ccc','-moz-box-shadow':'0px 0px 0px #ccc'});
$('#car').stop().fadeTo(500, 1); // машину на исходную
$("#" + theid).stop().fadeTo(500, 0); // прячим элемент с id равным нашему rel
}
);


});

Вот и готово.

Для закрепления материала:

Что бы окончательно разобраться в этом уроке, я рекомендую модернизировать это приложение следующим образом:

При помощи отлавливания события – «загрузка картинки» ($(‘img’).load()), сделайте так, чтобы машина не появлялась, пока все картинки не загрузятся.

Пока картинки не загрузились, в центре дива .slide должна крутится вот эта гифка:

BMW

Соответственно навигация сверху, тоже должна появится только после загрузки картинок.

Область применения

Наиболее вероятная область применения – это безусловно Интернет магазины. Разобрать на запчасти можно как автомобиль, так и компьютер, одежду на модели, экипировку игрового персонажа и тому подобное. Если элемент уж слишком фигуристый, ссылку над ним можно построить из нескольких блоков.

Применяйте и модернизируйте!

Ваши вопросы и отзывы жду в комментариях

С уважением Михаил Беляев.

Автор: Михаил Беляев.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (35)

  1. Татьяна

    Почему же поиздеваться?! Делая такие уроки, можно и заработать.
    Спасибо! Будем разбираться!

  2. Евгений

    Завидую программистам и web-дизайнерам.Это ж какие мозги надоть иметь!Для меня лично это все китайские иероглифы.Я вот со со своим сайтом на wordpress совсем запарился!Шаблон на хост задвинуть да статеек несколько понаписать ума еще хватило.А вот с плагинами да виджетами совсем засада.И совета спросить не у кого.Живу в таком мухосранске Арханг.обл.Хоть бы помог малость что ли кто?

    • Виктор Рог

      А Вы за нами следите внимательнее. Уже очень скоро мы дадим много контента по WordPress.
      А родину любить надо;)

      • Вадим

        Да действительно статьи стоящие, много почерпнул интересного .БОЛЬШОЕ Вам ребята спасибо за Вашу работу и за прекрасно оформленный сайт! Вадим г.Нарткала Кабардино-Балкария.

    • bloginblog

      Всегда помогу с WordPress.

  3. Евгений

    Я дико извиняюсь!Зашел сюда прямо со своего ящика т.к.я являюсь вашим подписчиком.И попал на статью о web-дизайне.А кучу статей о wordpress только сейчас обнаружил.Поверте мне это очень важно.Сейчас их все буду внимательно изучать.Материал для меня очень ценный.Добавил ваш сайт теперь в закладки.Очень бы хотелось как можно больше материалов по wordpress.А насчет Родины так я её люблю.мухосранск-это я так любя свой горд называю.Я бы хотел здесь в коментах адрес своего сайта выложить.Но пока стыдно.Шибко он у меня страшный пока.Я пока лишь студент школы StartUp и мало чего умею.

    • Леонид

      Евгений я тоже из Архангельской области, и тоже весной проходил эту школу StarUp, а сайт свой покажи может что-нибудь дельное подскажут.

  4. Pocherk

    Хороший урок и главное полезный. Обязательно применю в своих проектах

  5. Александр

    Идея хороша своей простотой, но не нова. К стати было бы интересней убрать коментарии с верху. Наводим мышь, к примеру, на дверь, она отделяется (сдвиг эот не сложно)и появляется прайс на двери (модели, цена). А вот реализация в 3D с отделением и вращением элемента… .

    • Михаил

      Я думаю Вы мыслите в нужную сторону)
      У приложения есть исходники, берите и дополняйте.
      И будет очень круто, если Вы выложите ссылку на свою версию.
      Это и есть прогресс.

    • Виктор Рог

      Кстати, действительно, мысль-то интересная!

  6. Шамшур Иван

    Да, прикольно получилось. Спасибо!

  7. Виталий

    Слишком сложно для большинства пользователей. Не все же такие вундеркинды как Вы!

    • Михаил

      На самом деле, ничего сложного тут нет, разве что требуются базовые знания популярных веб технологий.

  8. Михаил

    А сайт действительно классный правда я еще далекий от всего этого фотошоп,HTML но надеюсь что это всего лиш вопрос времени.

  9. Елена

    Спасибо. Ваши уроки раз от раза всё замечательнее и полезнее. Особенно радуют комментарии к коду. Здорово, что новички в вэбе теперь могут такое прочесть) Лет десять назад, если кто код и выкладывал то уж точно без пояснений. Курите мануалы и точка!)))
    Молодцы.

  10. eugene_lit

    Спасибо большое за интересные уроки! Мне очень понравилось!

  11. Михаил

    Огромное спасибо всем оценившим!
    Моя самооценка стремительно растёт! :)

  12. Вера

    Здравствуйте! Уроки безусловно классные! Спасибо, Но вот что я хотела уточнить -может я что-то не получаю из уроков — в данном уроке в ссылках используется атрибут rel, а в уроке о ссылках говорилось о href, о rel же не было ни слова. Неприятное ощущение пропущенной важной информации

  13. Эдуард

    Как всегда доходчиво!
    Как всегда полезно, как практически, так и для укрепления теории!
    Большое спасибо!!!

  14. Рамиль Рафиков

    Отличная работа! так же хорошо все расписано, все по полочкам! Здорово!

  15. Антон

    Можно попробовать что-то типа этого, только с элементами AREA. С ними проще в плане создания изображения, разбитого на элементы. Это можно делать, например, в adobe illustrator.

  16. Людмила

    Cпасибо за полезную информацию и знания.Я думала, что одна такая….,а нас много таких, но мы учимся и спасибо Вам за науку!

  17. Игорь

    Классно!
    Очень красиво.

  18. Артём

    А чё очень интересно, создайте по этой теме инфо продукт, я думаю будет очень популярен, сам куплю с удовольствием!!!

  19. Александр

    Круто!спасибо за интересную статью

  20. Сергей

    Спасибо за интересный урок.

  21. Стас

    На самом деле здорово получилось. Я вот решил реализовать по выбору select появляется одна картинка, по второму выбору на неё накладывается другая, и вот методом множественного выбора формируется одна картинка. Что то на вроде подбора товара. Ну вот пока не получается, т.к. хотел еще и сумму при выборе заложить. А за урок спасибо что то взял отсюда…

  22. Антон

    //Пока картинки не загрузились, в центре дива .slide должна крутится вот эта гифка:/…
    А как, собственно, сделать так, чтобы эта gif’ка была до загрузки картинки?

  23. Саня

    Михаил, может дополнишь статью кодом про gif-картинку? Не всем знаком JavaScript. Думаю многим было бы интересно, как при помощи отлавливания события – «загрузка картинки» сделать так, чтобы машина не появлялась, пока все картинки не загрузятся. А за статью зачет!!! Очень понравилась!

  24. Семён

    Добрый день, Михаил.
    Хотелось связаться с Вами отдельно, без форума. У меня небольшая проблема и я не могу её решить. Прошу помощи у Вас.
    А данный выше пример ПРОСТО ПРЕВОСХОДНЫЙ, и что хорошо, всё описано на понятном языке.

  25. sv

    Ребят, а где же ссылка на демо? Огорчен был, дочитав замечательну статью до конца…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree