Ділимо кузов автомобіля на елементи за допомогою jquery

21

Від автора: на роботі ми спілкувалися з клієнтом, який прийшов до нас за сайтом. Клієнт той займається продажем елементів кузовів автомобілів і їх комплектуючих. В процесі спілкування до мене в голову ринула ідея цікавого віджета для його сайту.

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

Ділимо кузов автомобіля на елементи за допомогою jqueryДілимо кузов автомобіля на елементи за допомогою jquery

Завдання

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

Ділимо кузов автомобіля на елементи за допомогою jquery

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

вгорі сторінки, над зображенням повинні знаходиться посилання з назвами елементів кузова, при на веденні на які є відповідний елемент стає чітким, а решта напівпрозорим;

при наведенні на автомобіль, вказаний курсором елемент також стає чітким, а решта напівпрозорими. А так само підсвічується посилання зверху, з назвою елемента.

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

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

Ділимо кузов автомобіля на елементи за допомогою jquery

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

Ділимо кузов автомобіля на елементи за допомогою jquery

Тепер ділимо на елементи.

В фотошопі за допомогою інструменту «магнітне ласо» або «прямолінійне ласо» акуратно вирізаємо елемент кузова по шву, копіюємо і вставляємо в новому шарі. Якщо вставилось не рівно, зробіть цей шар напівпрозорим і перетягніть елемент, поки не співпаде з машиною, потім поверніть шару повну непрозорість.

Так шар за шаром зробіть всі елементи. Якщо зробити шар з машиною невидимим, то повинно вийти щось на зразок цього:

Ділимо кузов автомобіля на елементи за допомогою jquery

Тепер робимо всі верстви прозорими, крім одного з елементів. Зберігаємо для web в форматі png-24. Потім наступний елемент і т. д.

Отримуємо ось такі картинки:

Ділимо кузов автомобіля на елементи за допомогою jquery

Ділимо кузов автомобіля на елементи за допомогою jquery

Ділимо кузов автомобіля на елементи за допомогою jquery

Ділимо кузов автомобіля на елементи за допомогою jquery

Ділимо кузов автомобіля на елементи за допомогою jquery

Ділимо кузов автомобіля на елементи за допомогою jquery

Почнемо монтаж кузова!

Метод

1. Верстка

Щоб всі елементи кузова і сама машина розташувалися один над одним по осі z, ми створимо діви з відповідними розмірами розміру картинок, привласнимо їм абсолютне позиціонування і бэкграунды, в якості яких будуть наші елементи і машина.

Елементи треба, безсумнівно, розмістити по верх самої машини, так як щоб машина тьмяніли, а елемент фокусувався, машина повинна бути на задньому плані.

Потім, поверх всіх елементів потрібно розмістити посилання. Складність полягає в тому, як ці посилання розмістити над відповідними елементами?

Це не проблема! Почнемо з того, що задамо цим посиланням блочне відображення і абсолютне позиціонування. Потім відрегулюємо їх положення і розміри.

План DOM

Ділимо кузов автомобіля на елементи за допомогою jquery

2. Анімація

Наш скрипт повинен реагувати на наведення курсору на салку зверху так: змінює стилі цього посилання, висмикує зміст її атрибуту rel, знаходить по id див елемента кузова, згідно з атрибутом rel посилання. Потім знайдений дів він виявляє за допомогою fadeIn(). У той же час дів з машиною стає напівпрозорим. Коли курсор йде зі посилання, все змінені елементи повертають в початковий стан.

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

Реалізація

1. HTML

Зараз я покажу готовий html нашої сторінки. У ньому вже відкалібровані посилання над машиною. Потім я покажу, як їх можна зручно розставляти.

BMW m3

бампера
фари
капоти
крила
сорочки
дзеркала

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.

Праворуч відображаються стилі інспектується об’єкта, які можна змінювати і відразу бачити результат. Ось ми і будемо пересувати і змінювати розміри посилання.

Ділимо кузов автомобіля на елементи за допомогою jquery

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

Ділимо кузов автомобіля на елементи за допомогою jquery

Після калібрування, виділяємо стилі в firebug, копіюємо і вставляємо в атрибут style редагованої посилання.

За таким принципом калібруючи всі посилання.

Ділимо кузов автомобіля на елементи за допомогою jquery

Потім прибираємо бордери.

Верстка закінчено, справу за анімацією.

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 має крутиться ось ця гифка:

Ділимо кузов автомобіля на елементи за допомогою jquery

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

Область застосування

Найбільш ймовірна область застосування – це безумовно Інтернет магазини. Розібрати на запчастини можна як автомобіль, так і комп’ютер, одяг на моделі, екіпіровку ігрового персонажа тощо. Якщо елемент аж надто фигуристый, посилання над ним можна побудувати з декількох блоків.

Застосовуйте і модернізуйте!

Ваші запитання, відгуки чекаю в коментарях

З повагою Михайло Бєляєв.