Автор

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

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

Пост был написан мной 25.09.2011 и я его немного обновил и описал результаты этого неприятного факта. «Сегодня лопатил интернет и набрел на клон моего сайта. Дело в том, что этот домен (www.studio25kadr.ru) ранее принадлежал мне, но мне пришлось его поменять на существующий <a href="/">www.s-sd.ru</a>...


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

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


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

Для слайдеров используется множество эффектов, их все сосчитать сложно, не то чтобы представить, но мы бы хотели отметить один небольшой эффект, который создает иллюзию разбитого стекла, изображение будет хаотично дробиться и постепенно исчезать, создавая при этом небольшой эффект объемности и полета осколков стекла вниз, при этом старое изображение будет замещаться новым.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close