Эффект размытия пунктов списка

В данном уроке мы создадим простой эффект размытия текстовых пунктов. Идея заключается в организации набора блоков с текстом, которые будут размываться и уменьшаться в масштабе при наведении курсора мыши на один из них. Блок, который получает фокус ввода, наоборот будет увеличиваться. В результате получается эффект "фокусирования", который помогает выделить пункт с курсором мыши на нем.

Для эффекта будут использоваться переходы CSS3 и немного jQuery для применения соответствующих классов. Так как переходы CSS3 не поддерживаются в старых браузерах, то демонстрацию лучше всего смотреть в Safari или Chrome (где трансформации выглядят наилучшим образом).

 

Разметка HTML

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

<section class="ib-container" id="ib-container">
    <article>
        <header>
            <h3><a href="#">Заголовок</a></h3>
            <span>Некоторый текст</span>
        </header>
        <p>Описание</p>
    </article>
    <article>
        <!-- ... -->
    </article>
    <!-- ... -->
</section>

 

CSS

Основной контейнер имеет фиксированную ширину и центрирован:

.ib-container{
	position: relative;
	width: 800px;
	margin: 30px auto;
	display: block;
}

Избавимся от обтекания текста (наши статьи будут плавающими блоками) с помощью псевдо элементов :before и :after:

.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}

Теперь определим стили для пунктов статей. Они будут плавающими блоками и иметь две тени, из которых светлая будет распространяться на большем расстоянии. Также добавим переход трех свойств: тени, трансформации и непрозрачности.

.ib-container article{
	display: block;
	width: 140px;
	height: 220px;
	background: #fff;
	cursor: pointer;
	float: left;
	border: 10px solid #fff;
	text-align: left;
	text-transform: none;
	margin: 15px;
	z-index: 1;
	box-shadow: 
		0px 0px 0px 10px rgba(255,255,255,1), 
		1px 1px 3px 10px rgba(0,0,0,0.2);
	-webkit-transition: 
		opacity 0.4s linear, 
		-webkit-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-moz-transition: 
		opacity 0.4s linear, 
		-moz-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-o-transition: 
		opacity 0.4s linear, 
		-o-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-ms-transition: 
		opacity 0.4s linear, 
		-ms-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	transition: 
		opacity 0.4s linear, 
		transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;

}


Для браузеров Webkit также добавим

-webkit-backface-visibility: hidden

для того, чтобы избежать мерцания.

Теперь зададим стили для текстовых элементов и улучшим типографику. Цвет и тень каждого элемента будут соответствовать:

.ib-container h3 a{
	font-size: 16px;
	font-weight: 400;
	color: #000;
	color: rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
	opacity: 0.8;
}
.ib-container article header span{
	font-size: 10px;
	font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
	padding: 10px 0;
	display: block;
	color: #FFD252;
	color: rgba(255, 210, 82, 1);
	text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
	text-transform: uppercase;
	opacity: 0.8;
}
.ib-container article p{
	font-family: Verdana, sans-serif;
	font-size: 10px;
	line-height: 13px;
	color: #333;
	color: rgba(51, 51, 51, 1);
	text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
	opacity: 0.8;
}

Теперь добавим переход для всех трех селекторов. Снова мы будем использовать три свойства: непрозрачность, тень текста и цвет..

.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
	-webkit-transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
	-moz-transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
	-o-transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
	-ms-transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
	transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
}

Класс blur будет использоваться для всех смежных пунктов рядом с тем, на котором располагается курсор мыши. Будем немного уменьшать масштаб пунктов и добавлять большую белую тень, чтобы сделать пункт размытым. Также немного уменьшим непрозрачность:

.ib-container article.blur{
	box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0.7;
}

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

.ib-container article.blur h3 a{
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
	color: rgba(0, 0, 0, 0);
	opacity: 0.5;
}
.ib-container article.blur header span{
	text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
	color: rgba(255, 210, 82, 0);
	opacity: 0.5;
}
.ib-container article.blur  p{
	text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
	color: rgba(51, 51, 51, 0);
	opacity: 0.5;
}

Пункт, на котором располагается курсор мыши, будет немного увеличен, и для него будет выровнена тень. Также установим большое значение свойства z.index для гарантированного вывода данного пункта поверх остальных:

.ib-container article.active{
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow: 
		0px 0px 0px 10px rgba(255,255,255,1), 
		1px 11px 15px 10px rgba(0,0,0,0.4);
	z-index: 100;	
	opacity: 1;
}

Устанавливаем непрозрачность всех текстовых элементов равной 1:

.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
	opacity; 1;
}

 

JavaScript

Когда курсора мыши оказывается на статье, будем устанавливать ей класс active, а всем остальным пунктам - класс blur:

$(function() {
	
	var $container	= $('#ib-container'),
		$articles	= $container.children('article'),
		timeout;
	
	$articles.on( 'mouseenter', function( event ) {
			
		var $article	= $(this);
		clearTimeout( timeout );
		timeout = setTimeout( function() {
			
			if( $article.hasClass('active') ) return false;
			
			$articles.not( $article.removeClass('blur').addClass('active') )
					 .removeClass('active')
					 .addClass('blur');
			
		}, 65 );
		
	});
	
	$container.on( 'mouseleave', function( event ) {
		
		clearTimeout( timeout );
		$articles.removeClass('active blur');
		
	});

});

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Ao7U2koAmaE/lessons.php

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

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



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

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