Интерфейс, реагирующий на наведение курсора мыши
В данном уроке мы разберемся, как построить интерфейс, который реагирует на наведение курсора мыши на различные элементы. Для обеспечения функционирования будут использованы jQuery, CSS3, HTML5 и @font-face. Подобные интерфейсы приобретают всю большую актуальность в связи с ростом популярности использования веб технологий на мобильных устройствах. Но даже на настольных системах подобный интерфейс будет приятно и удобно использовать. Проект, который мы сегодня построим, можно использовать для организации портфолио работ или демонстрации бизнес-предложений. Но концепция, которая будет представлена вам, легко масштабируется для реализации других идей. Наш проект будет носить название "чудесная стена".
Что такое, интерфейс, который реагирует на наведение курсора мыши на различные элементы?
Основное (или все) взаимодействие с пользователем в таком интерфейсе управляется с помощью наведения курсора мыши на различные элементы интерфейса. Такие интерфейсы требуют существенно меньших усилий от пользователя для просмотра контента по сравнению с обычными интерфейсами, управляемыми нажатием левой кнопки мыши, но предъявляют повышенные требования к разработке структуры и более продуманного дизайна для обеспечения качественной навигации. Наш учебный проект будет иметь интерфейс, управляемый наведение курсора мыши. Возникает вопрос, мобильные устройства не используют наведение курсора мыши, следует ли заниматься изучением построения такого рода интерфейсов?
Конечно стоит. Если посмотреть на популярные проекты в сети интернет, то можно отметить, что большинство из них имеет две версии сайтов - одна для браузеров настольных систем (полноразмерная), а другая оптимизирована для мобильных приложений (сфокусированы на использовании различных сенсорных экранов). Интерфейсы, реагирующие на наведение курсора, можно рассматривать как вариант полноразмерного интерфейса, который очень легко модифицировать для мобильного устройства, потому что он обладает схожей логикой функционирования. Пользователю будет проще ориентироваться в двух вариантах одного проекта.
Принцип работы нашей чудесной стены?
Чудесная стена содержит два ключевых компонента, которые взаимодействуют друг с другом:
1. Слайдер заголовков: когда пользователь наводит курсор мыши на одну из рамочек со ссылками в заголовке, то происходит анимация опускающегося фона, соответствующего ссылке в рамочке. Как только фон заголовка будет полностью выведен, проявляется текст, соответствующий данной секции.
2. Слайдер страниц: одновременно соответствующая страница выскальзывает в область просмотра (это контейнер div, который может содержать любой контент HTML - текст, изображения, видео).
Когда пользователь убирает курсор мыши с соответствующей ссылки, последняя страница, которая просматривалась, остается на экране. Такое функционирование сделано для поддержки просмотра всего контента на странице, что может потребовать прокрутки вниз или взаимодействия с другими элементами управления (например, включить воспроизведение видео).
Как чудесная стена использует CSS3, @font-face и HTML5?
CSS3 используется для задания стилей для элементов чудесной стены и оформления текста тенями, фонов градиентами и вращений. Такой подход позволяет сохранить компактность при достаточно привлекательном дизайне. Свойство @font-face используется для оформления типографики с сохранением кросс-браузерности, благодаря применению замечательного генератора шрифтов Font-Squirrel.
Есть впечатление, что font-face работает существенно быстрее Cufon или sIFR при выводе надписей, а также для него не требуется JavaScript.
HTML5 используется для организации всплывающих подсказок, которые можно видеть на главной странице для надписей справа. Они используют атрибут "data-" HTML5. В данном случае HTML5 используется только для демонстрации возможностей, данный функционал может быть легко изменен на использование jQuery.
Создаем чудесную стену
Первым делом нам надо продумать, как пользователь будет взаимодействовать с интерфейсом во время работы. Как только будет готов план, то можно приступать к созданию HTML структуры страницы.
HTML для рамочек заголовка (со ссылками)
<div id="wanderwall"> <div class="wrapper"> <div class="frame first" id="frame1"> <a alt="jQuery используется для анимаций чудесной стены" href="#" id="link1" style="display: block;"> <span>jQuery</span> </a></div> <div class="frame two" id="frame2"> <a alt="CSS3 используется для линейных градиентов и стилей" href="#" id="link2" style="display: block;"> <span>CSS3</span> </a></div> <div class="frame three" id="frame3"><a alt="Сила HTML5 при выводе подсказок" href="#" id="link3" style="display: block;"> <span>HTML5</span> </a></div> <div class="frame fourth" id="frame4"> <a alt="Сила Font-Face для удивительных шрифтов" href="#" id="link4" style="display: block;"> <span>@font-face</span> </a></div> </div> </div>
HTML код для страниц
<div class="page"> <div class="mantletext"> <h3>jQuery</h3> <h2>Чудесная стена 1</h2> </div> </div> <div class="page"> <div class="mantletext"> <h3>jQuery</h3> <h2>Чудесная стена 2</h2> </div> </div> <div class="page"> <div class="mantletext"> <h3>jQuery</h3> <h2>Чудесная стена 3</h2> </div> </div> <div class="page"> <div class="mantletext"> <h3>jQuery</h3> <h2>Чудесная стена 4</h2> </div> </div>
В реальной жизни следующим шагом следует построение простой структуры CSS кода. Но для более ясного процесса мы перейдем к JavaScript, и только после него к CSS3.
jQuery для анимации фона (при наведении курсора мыши на рамочку)
$("div.frame a").hover(function() { /*Обрезаем идентификатор ссылки до ID*/ var id = this.id.replace("link", ""); var currentLink = $(this); /*Скрытие остальных рамок на основе номера ID*/ hideTheRest(id); position = -296*id; /*Определяем смещение для соответствующей страницы*/ marginnew = pagewidth * id * -1; /*Выводим ссылку "Главная", если это не страница по умолчанию*/ if(id > 0) { $('#homelink').show(); }else{ $('#homelink').hide(); } /*Анимируем слайдер страниц до нового положения*/ $('.pageslider').stop().animate({marginLeft: marginnew}, 800); /*Анимируем фон заголовка*/ $('#wanderwall').stop().animate({backgroundPosition: '(50% ' + position +'px )'}, 500, function() { var distance = 0; var topdis = -190; var text = currentLink.attr('alt'); var infoframe = $('#infoframe'); /*Определяем смещение для текста заголовка, чтобы вывести его рядом с рамочкой*/ switch(id) { case "1": distance = 500; break; case "2": distance = 730; break; case "3": distance = 200; break; case "4": distance = 400; topdis = -198; break; } infoframe.html(text); infoframe.css('margin-left', distance + 'px'); infoframe.css('margin-top', topdis + 'px'); infoframe.fadeIn(); }); }, function() { $('#infoframe').hide(); var id = this.id.replace("link", ""); $('#wanderwall').stop().animate({backgroundPosition: '(50% 0px)'}, 500 ); showTheRest(); });
jQuery для вывода и скрытия остальных элементов при наведении курсора мыши
function hideTheRest(id){ for (var i=1; i<5; i++){ if (i!=id) { $('#frame' + i + ' a').css('display', 'block'); $('#frame' + i).css('filter', 'alpha(opacity=90)'); $('#frame' + i).stop().fadeTo("fast",0); $('#frame' + i + ' a').css('display', 'none'); } } $('#infoframe').css('visibility','visible'); } function showTheRest(){ for (var i=1; i<5; i++){ $('#frame' + i).stop().fadeTo("fast",0.9); $('#frame' + i).css('filter', 'alpha(opacity=90)'); $('#frame' + i + ' a').css('display', 'inline'); $('#frame' + i + ' a').css('display', 'block'); } $('#infoframe').css('visibility','hidden'); }
Здесь приведен только основной код jQuery. Полностью код можно посмотреть в исходниках.
CSS3 для градиентов фона и разделительной полосы
body{ background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(153,153,153)), color-stop(0.55, rgb(242,242,242)), color-stop(0.78, rgb(240,237,240)) ); background: -moz-linear-gradient( center bottom, rgb(153,153,153) 9%, rgb(242,242,242) 55%, rgb(240,237,240) 78% ); } #mantle { width:100%; height:30px; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(153,153,153)), color-stop(0.55, rgb(242,242,242)), color-stop(0.78, rgb(252,252,252)) ); background: -moz-linear-gradient( center bottom, rgb(153,153,153) 9%, rgb(242,242,242) 55%, rgb(252,252,252) 78% ); -webkit-background-origin: padding; -webkit-background-clip: content; border-bottom:1px solid #fff; }
CSS3 для вращения рамки
.frame:hover{ -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg); }
Кросс-браузерное свойство @font-face
@font-face { font-family: 'OptimaCyrBold'; src: url('optima_cyr_bold-webfont.eot'); src: url('optima_cyr_bold-webfont.eot?#iefix') format('eot'), url('optima_cyr_bold-webfont.woff') format('woff'), url('optima_cyr_bold-webfont.ttf') format('truetype'), url('optima_cyr_bold-webfont.svg#webfontT2rRKg9s') format('svg'); font-weight: normal; font-style: normal; }
Использование CSS3 @font-face и тени для текста (эффект вдавливания)
color:#444444; text-shadow:0 1px 0 #FFFFFF; font-family: 'OptimaCyrBold', sans-serif; font-size-adjust: 0.55; font-size:25px; margin-top:30px;
CSS для подсказок
/* Подсказки HTML5 */ /* Устанавливаем другой курсор для ссылок с подсказками (по умолчанию подсказки используют курсор "помощь") */ a[data-tooltip] { cursor:pointer !important; } /* Стили для элементов, у которых есть атрибут data-tooltip - использование общего селектора (*) создает нагрузку на процессор, может быть вы будете использовать ограниченный список элементов вместо него*/ *[data-tooltip] { /* Относительное позиционирование подсказок позволяет использовать position:absolute для генерируемого контента */ position:relative; /* Ссылки наследуют правило для курсора !important от выше стоящего в иерархии элемента */ cursor:help; text-decoration:none; border-bottom:1px dotted #aaa; *text-decoration:inherit; *border-bottom-width:inherit; *border-bottom-style:inherit; *cursor:inherit; *position:inherit; } /* Значения по умолчанию для :before & :after */ *[data-tooltip]:after, *[data-tooltip]:before { content:""; /* Не выводим подсказку по умолчанию */ opacity:0; /* Устанавливаем большое значение z-index */ z-index:999; -moz-transition-property: opacity; -moz-transition-duration: 2s; -moz-transition-delay: 1s; -webkit-transition-property: opacity; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -o-transition-property: opacity; -o-transition-duration: 2s; -o-transition-delay: 1s; transition-property: opacity; transition-duration: 2s; transition-delay: 1s; text-decoration:none !important; outline:none; } /* Стрелочка подсказки */ *[data-tooltip]:hover:before, *[data-tooltip]:focus:before { /* Небольшая прозрачность стрелочки */ opacity:0.94; outline:none; content:""; display:block; position:absolute; top:30px; left:50%; margin:0 0 0 -5px; width:0; height:0; line-height:0px; font-size:0px; /* Устанавливаем цвет указателя подсказки */ border-bottom:5px solid #33acfc; border-left:5px solid transparent; border-right:5px solid transparent; border-top:transparent; -webkit-border-image:-webkit-gradient(linear, left top, left bottom, from(#33ccff), to(#33acfc)); } /* Тело подсказки */ *[data-tooltip]:hover:after, *[data-tooltip]:focus:after { /* Небольшая прозрачность подсказки */ opacity:0.94; display:block; /* Используем атрибут data-tooltip для установки содержания*/ content:attr(data-tooltip); /* Позиционируем подсказку под стрелкой и в середине текста */ position:absolute; top:35px; left:50%; margin:0 0 0 -150px; width:290px; padding:10px; line-height:10px; min-height:10px; color:#fcfcfc; font-size:16px; font-weight:normal; font-family:helvetica neue, calibri, verdana, arial, sans-serif; background:#3198dd; text-align:center; outline:none; text-decoration:none !important; background:-webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd)); background:-moz-linear-gradient(top,#33acfc,#3198dd); -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 4px #ccc; -webkit-box-shadow:2px 2px 4px #ccc; box-shadow:2px 2px 4px #ccc; text-shadow:#2187c8 0 1px 0px; font-family: 'OptimaCyrBold', sans-serif; font-size-adjust: 0.55; letter-spacing:-1px; font-size:16px; line-height:22px; }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/BiimO7EgwAU/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
Человек - аристократ среди животных Гейне Генрих - (1797-1856) - немецкий поэт и публицист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp