ПРОГРАММИНГ И ДИЗАЙН НА КАЖДЫЙ ДЕНЬ
На модерации
Отложенный
Эффект размытия с помощью CSS3 и jQuery
Сегодня вы увидите, как создать простой эффект размытия для текстовых элементов. Основная задача – есть набор текстовых блоков, которые будут размываться и уменьшаться, когда мы проводим над ними указателем мыши. Элемент в фокусе будет увеличиваться. Это создаст эффект фокуса, который привлечет внимание к элементу, над которым указатель мыши находится сейчас.
Демо – Исходный код
Мы будем использовать переходы 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
Перевод — Дежурка
Смотрите также:
Создание эффекта глянцевой фотографии при помощи CSS3
Создание 3D эффекта на примере простых объектов
Создание CSS3 исчезающих окон уведомления
материал с dejurka.ru
Комментарии