Интерфейс, реагирующий на наведение курсора мыши

В данном уроке мы разберемся, как построить интерфейс, который реагирует на наведение курсора мыши на различные элементы.  Для обеспечения функционирования будут использованы 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

Читать комменты и комментировать

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



Защитный код
Обновить

Интерфейс, реагирующий на наведение курсора мыши | | 2012-06-19 12:10:03 | | Статьи Web-мастеру | | В данном уроке мы разберемся, как построить интерфейс, который реагирует на наведение курсора мыши на различные элементы.  Для обеспечения функционирования будут использованы jQuery, CSS3, HTML5 и | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: