От автора: на работе мы общались с клиентом, который пришёл к нам за сайтом. Клиент тот занимается продажей элементов кузовов автомобилей и их комплектующих. В процессе общения ко мне в голову ломанулась идея интересного виджета для его сайта.
Предложили клиенту разместить на главной странице сайта фото автомобиля. При наведении курсора на машину, чётким должен оставаться только тот элемент кузова, на который наведён курсор, а остальное должно становиться полупрозрачным.
Задача
Результат разработки должен подарить нам следующие красивости:
Результат разработки должен подарить нам следующие красивости:
вверху страницы, над изображением должны находится ссылки с названиями элементов кузова, при на ведении на которые соответствующий элемент становится чётким, а остальное полупрозрачным;
при наведении на автомобиль, указанный курсором элемент также становится чётким, а остальные полупрозрачными. А так же подсвечивается ссылка сверху, с названием указанного элемента.
Подготовка необходимого материала
Для начала нам надо подготовить машину и её запчасти. Я выбрал BMW m3… Не дано такой обзавестись, ну хоть поиздеваюсь.
🙂
Я взял фото автомобиля с фронтального ракурса.
Теперь делим на элементы.
В фотошопе при помощи инструмента «магнитное лассо» или «прямолинейное лассо» аккуратно вырезаем элемент кузова по шву, копируем и вставляем в новом слое. Если вставилось не ровно, сделайте этот слой полупрозрачным и передвигайте элемент, пока не совпадёт с машиной, потом верните слою полную непрозрачность.
Так слой за слоем сделайте все элементы. Если сделать слой с машиной невидимым, то должно получиться что-то на подобии этого:
Теперь делаем все слои прозрачными, кроме одного из элементов. Сохраняем для web в формате png-24. Затем следующий элемент и т.д.
Получаем вот такие картинки:
Начнём монтаж кузова!
Метод
1. Вёрстка
Чтобы все элементы кузова и сама машина расположились друг над другом по оси z, мы создадим дивы с размерами соответствующими размеру картинок, присвоим им абсолютное позиционирование и бэкграунды, в качестве которых будут наши элементы и машина.
Элементы надо, несомненно, разместить по верх самой машины, так как чтобы машина блекла, а элемент фокусировался, машина должна быть на заднем плане.
Затем, поверх всех элементов нужно разместить ссылки. Сложность состоит в том, как эти ссылки разместить над соответствующими элементами?
Это не проблема! Начнём с того, что зададим этим ссылкам блочное отображение и абсолютное позиционирование. Затем отрегулируем их положение и размеры.
План DOM
2. Анимация
Наш скрипт должен реагировать на наведение курсора на салку сверху так: изменяет стили этой ссылки, выдёргивает содержание её атрибута rel, находит по id див элемента кузова, в соответствии с атрибутом rel ссылки. Затем найденный див он проявляет с помощью fadeIn(). В то же время див с машиной становится полупрозрачным. Когда курсор уходит со ссылки, все изменённые элементы возвращают исходное состояние.
При наведении на ссылку над элементом кузова, скрипт проводит ту же операцию, только сама ссылка не изменяется, изменяется ссылка с таким же rel сверху страницы.
Реализация
1. HTML
Сейчас я покажу готовый html нашей страницы. В нём уже откалиброваны ссылки над машиной. Затем я покажу, как их можно удобно расставлять.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!-- Голова - начало документа --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head profile="//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 структура у нас есть, теперь надо описать стили объектов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
/* убиваем отступы */ * { 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: //chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench?hl=ru
Mozilla FF – firebug: //addons.mozilla.org/ru/firefox/addon/firebug/
Opera – dragonfly: //www.opera.com/dragonfly/
Эти утилиты помогут проинспектировать вёрстку и стили вашей страницы в режиме просмотра, а так же изменять её и прослеживать результат этих изменений во время просмотра.
Рассмотрим процедуру калибровки на примере firebug
Во-первых, нам надо временно всем ссылкам сделать бордер красного цвета, чтобы видеть его положение и размеры.
Затем, после установки firebug, мы запускаем его во время просмотра нашей страницы. (У мозилы он запускается нажатием на маленького жука в нижнем, правом углу браузера, а у хрома такой же жук, только среди других расширений вверху браузера, справа от адресной строки. В случае с оперой, драгонфлай запускается так: правым кликом по элементу страницы, выбираем «проинспектировать элемент» или «inspect element»).
Находим нашу ссылку в dom или выбираем её при помощи «inspect» вверху панели firebug.
Справа отображаются стили инспектируемого объекта, которые можно изменять и тут же видеть результат. Вот мы и будем передвигать и изменять размеры ссылки.
До тех пор, пока наша ссылка не будет над элементом кузова.
После калибровки, выделяем стили в firebug, копируем и вставляем в атрибут style редактируемой ссылки.
По такому принципу калибруем все ссылки.
Затем убираем бордеры.
Верстка закончена, дело за анимацией.
JavaScript
В разделе «Метод», этой статьи описан принцип работы скрипта. В самом скрипте прокомментировано каждое событие и действие. Внимательно изучаем!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
$(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 должна крутится вот эта гифка:
Соответственно навигация сверху, тоже должна появится только после загрузки картинок.
Область применения
Наиболее вероятная область применения – это безусловно Интернет магазины. Разобрать на запчасти можно как автомобиль, так и компьютер, одежду на модели, экипировку игрового персонажа и тому подобное. Если элемент уж слишком фигуристый, ссылку над ним можно построить из нескольких блоков.
Применяйте и модернизируйте!
Ваши вопросы и отзывы жду в комментариях
С уважением Михаил Беляев.
Автор: Михаил Беляев.
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Комментарии (35)