Эффект размытия с помощью CSS3 и jQuery

7 декабря 2013 | Опубликовано в css | 1 Комментарий »

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

Демо – Исходный код

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

Так как мы используем переходы, этот эффект будет работать правильно только в браузерах, которые их поддерживают.

Итак, начнем!

Разметка

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

<section class="ib-container" id="ib-container">

    <article>

        <header>

            <h3><a href="#">Some Headline</a></h3>

            <span>Some other text</span>

        </header>

        <p>Some introduction</p>

    </article>

    <article>

        <!-- ... -->

    </article>

    <!-- ... -->
</section>

Давайте рассмотрим стили.

CSS

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

.ib-container{

    position: relative;

    width: 800px;

    margin: 30px auto;
}

Давайте сделаем так, чтобы наши блоки, всплывающие влево, отталкивались друг от друга, используя псевдо-элементы :before и :after.

.ib-container:before,

.ib-container:after {

    content:"";

    display:table;

}

.ib-container:after {

    clear:both;
}

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

.ib-container article{

    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);

    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: 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: 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: 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{

    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);

    transform: scale(0.9);

    opacity: 0.7;
}

Чтобы текстовые элементы выглядели размыто, мы сделаем цвет прозрачным, устанавливая значение прозрачности параметра rgba в 0, и мы увеличим расстояние «размытия» тени текста:

.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{

    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.

JavaScript

Итак, когда мы наводим указатель на статью, мы установим всем остальным статьям класс blur, и текущая статья получит класс active:

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('active').addClass('blur');

        $article.removeClass('blur').addClass('active');

    }, 75 );

});

$container.on( 'mouseleave', function( event ) {

    clearTimeout( timeout );

    $articles.removeClass('active blur');
});

И это все! Надеемся, Вам понравился этот урок и он Вам пригодится!

Демо – Исходный код

Автор урока Mary Lou
Перевод — Дежурка

Смотрите также:

Опубликовано в css, декабря 7, 2013
Метки: css, css размытие, Jquery, jquery плагины, верстка, урок css, урок верстка, эффект размытия css, эффекты css

�

Эффект размытия с помощью CSS3 и jQuery

Разметка

CSS

JavaScript

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые