Ефект пульсації при кліці з допомогою CSS3 і jQuery

64

Матеріальний дизайн (Material Design) від компанії Google, в якому анімації не просто пожвавлюють інтерфейс, але і представляють користувачу, що відбувається. Чарівні ідеї про тривимірному просторі не залишили байдужими більшу частину спільноти веб-розробників і дизайнерів всіх мастей.
Фрейморки використовують принципи матеріального дизайну виходять у світ одне за одним і використовуються не тільки для уніфікації інтерфейсів додатків ОС Андроїд, але для розробки елементів інтерфейсу веб-сайтів.
Багато фічі зі складу матеріального дизайну можна дуже навіть просто відтворити у себе на сайті і без підключення фреймворків. Що я сьогодні вам покажу, на прикладі реалізації ефекту пульсації (ripple), або якщо хочете, ефекту розбіжних кіл на воді(брижі), при натисканні на будь-якій частині сторінки.

Дивитися Демо

Для цього нам знадобиться: завчасно підключена бібліотека javascript, jQuery, невеликий плагін для запуску ефекту і трохи магії CSS3-анімації.

Почнемо з розгляду коду CSS, сформуємо стилі і налаштуємо анімацію @keyframes.

CSS

Для тега позначимо висоту документа в 100%.

html {
height:100%;
}

html {
height:100%;
}

Далі сформуємо стилі самого ефекту. Короткі коментарі до коду, допоможуть швидше розібратися що до чого:

.ripple {
position: relative;
overflow: hidden;
-webkit-transform: translate(0);
}
/* параметри візуального елемента ефекту */
.effekt {
display: block;
position: absolute;
pointer-events: none;
/* абсолютно круглий */
border-radius: 50%;
/* Збільшення або зменшення розміру елемента */
transform: scale(0);
/* володіємо вище інших об'єктів веб-сторінки */
z-index:9999;
/* колір фону елемента */
background: rgba(52, 152, 219,.7);
/* не прозорий */
opacity: 1;
}
/* ім'я, тривалість і зміну швидкості анімації */
.effekt.replay {
-webkit-animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
-o-animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
}

.ripple {
position: relative;
overflow: hidden;
-webkit-transform: translate(0);
}
/* параметри візуального елемента ефекту */
.effekt {
display: block;
position: absolute;
pointer-events: none;
/* абсолютно круглий */
border-radius: 50%;
/* Збільшення або зменшення розміру елемента */
transform: scale(0);
/* володіємо вище інших об’єктів веб-сторінки */
z-index:9999;
/* колір фону елемента */
background: rgba(52, 152, 219,.7);
/* не прозорий */
opacity: 1;
}
/* ім’я, тривалість і зміну швидкості анімації */
.effekt.replay {
-webkit-animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
-o-animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1);
}

Тепер підготуємо анімацію для різних браузерів використовуючи префікси, ім’я анімації, як ми пам’ятаємо ripple:

@keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}
@-moz-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}
@-ms-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}
@-o-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}

@keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}
@-moz-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}
@-ms-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}
@-o-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
}

На стороні CSS ми все підготували, залишається підключити бібліотеку jQuery до документа, якщо ви ще цього не зробили. У прикладі, підключив бібліотеку безпосередньо з Google CDN, перед закриваючим тегом досить розмістити наступний рядок:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">

Далі запускаємо невеликий плагін, в якому визначаємо, для якого елемента буде відтворений ефект, в нашому випадку це вся видима частина сторінки html. Для видимої частини ефекту використовуємо тег з відповідним класом.

Регулювати діаметр розходиться кола, ви можете змінюючи значення height: d/5, width: d/5. Тільки слід пам’ятати, що зменшуючи значення ви збільшуєте діаметр кола, а збільшуючи, навпаки зменшуєте. Ось така круговерть))). Звичніше вказувати рівнозначні величини в пікселях, наприклад height: 150 і width: 150, що власне ви можете робити. Більше в плагіні, особливо налаштовувати і нічого.

<script type="text/javascript">
// Об'єкт для якого буде застосований ефект
$("html").click(function(e){
var ripple = $(this);
// візуальний елемент ефекту
if(ripple.find(".effekt").length == 0) {
ripple.append("");
}
var efekt = ripple.find(".effekt");
efekt.removeClass("replay");
if(!efekt.height() && !efekt.width())
{
var d = Math.max(ripple.outerWidth(), ripple.outerHeight());
efekt.css({height: d/5, width: d/5});// Визначаємо розміри елемента ефекту 
}
var x = e.pageX - ripple.offset().left - efekt.width()/2;
var y = e.pageY - ripple.offset().top - efekt.height()/2;
efekt.css({
top: y+'px',
left:x+'px'
}).addClass("replay");
})

// Об’єкт для якого буде застосований ефект
$(“html”).click(function(e){
var ripple = $(this);
// візуальний елемент ефекту
if(ripple.find(“.effekt”).length == 0) {
ripple.append(““);
}
var efekt = ripple.find(“.effekt”);
efekt.removeClass(“replay”);
if(!efekt.height() && !efekt.width())
{
var d = Math.max(ripple.outerWidth(), ripple.outerHeight());
efekt.css({height: d/5, width: d/5});// Визначаємо розміри елемента ефекту
}
var x = e.pageX – ripple.offset().left – efekt.width()/2;
var y = e.pageY – ripple.offset().top – efekt.height()/2;
efekt.css({
top: y+’px’,
left:x+’px’
}).addClass(“replay”);
})

Якщо все зробите правильно, отримаєте в своє розпорядження ще одну чудову дизайнерську фішку. Такий ефект, ви можете застосовувати до будь-блочних елементів вашого сайту, для цього достатньо вказати його в виконуваному js. Наприклад, ви хочете застосувати ripple-ефект до div-контейнера зі змістом статей, який має клас content припустимо. В jQuery плагіні визначаєте функцію саме для цього елемента. Тоді, якщо стосовно нашого прикладу, $(“html”) замінюєте на $(“div.content”), перший рядок в коді плагіна буде виглядати так:

$(“div.content”).click(function(e)

Кнопки та інші активні елементи працюють з ефектом за тим же принципом.

Ще раз подивіться живий приклад роботи плагіна і при бажанні, сміливо забирайте исходники.

ДемоИсходники

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: