Автор

04 04.2013
Эффект размытия элементов сайта на jQuery

Эффект размытия элементов сайта на jQuery


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

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

<section 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;
}

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

17 01.2017
Эффект размытия элементов сайта на jQuery

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.


19 04.2013
Эффект размытия элементов сайта на jQuery

Красивое оформление изображений на сайте поможет пользователю быстрее найти необходимую информацию, но если оформить галерею картинок еще и достаточно привлекательно, то это заворожит взор пользователя. В данном уроке мы рассмотрим как создать отличную трехмерную галерею для сайта, которую, также, можно использовать в качестве главного ротатора контента на ресурсе. Осуществим мы это с помощью трансформаций css3. Основная идея заключается в круглой галерее, в центре которой у нас будет изображение, а также еще два изображения по бокам.


30 09.2017
Эффект размытия элементов сайта на jQuery

Коллекция причудливых текстовых эффектов, чтобы оживить теглайн и кнопки действий вашего сайта.


21 04.2013
Эффект размытия элементов сайта на jQuery

На некоторых сайтах можно встретить боковые меню, принцип его реализации можно найти в мобильной версии вконтакте и популярно сайта 3dnews. Это весьма удобно, ведь даже на моей мобильной версии IE это смотрится достаточно привлекательно, благодаря плавной анимации и простоте решения. В данном уроке мы рассмотрим как можно создать такое боковое меню. Мы рассмотрим несколько типов бокового меню: меню слева, права и добавим вариант просмотра с контентом, что позволит выводить страницу подобно фреймам.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close