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

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

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

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

Как видите все достаточно просто, теперь разберемся со стилями CSS, в котором основной контейнер имеет фиксированную ширину и центрирован:

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

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

 Чтобы красочно все отображалось для браузеров Webkit добавляем:

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

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

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

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

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

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

Теперь рассмотрим саму анимацию с помощью jQuery. Когда курсора мыши оказывается на статье, будем устанавливать ей класс active, а всем остальным пунктам — класс blur: