Як зробити красиву анімовану кнопку Пошук з CSS3 та jQuery

В сьогоднішньому уроці ми на практиці розглянемо те, як можна створити просту, але дуже красиву кнопку для пошуку, всього лише з допомогою CSS3 і jQuery.

Готова кнопка буде виглядати приблизно так:

Для створення такої гарної анімованої кнопки для вікна пошуку ми будемо використовувати наступні інструменти:

• HTML – для структури документу
• CSS3 – для стильового оформлення та анімації руху
• jQuery – для реагування на натискання кнопок

Деякий час тому назад розробники анімували HTML елементи, змінюючи значення CSS властивостей за допомогою JavaScript. Цей підхід вже застарів. Сьогодні ж, завдяки CSS3, ми можемо анімувати елементи на сторінці набагато швидше, простіше, а результати будуть дійсно вражаючими!

Отже, давайте перейдемо до практики!

Крок №1: Створення HTML каркаса

Перш за все, створимо контейнер div з класом search-form. У ньому буде розташовуватися наша форма пошуку.

Всередині створимо два блоки: один для поля введення input і самої кнопки пошуку, а другий для кнопки закриття (або «згортання») форми.

Зверніть увагу:

• Поле для введення тексту позиціонується абсолютно і розтягується на всю довжину свого «предка»
• Кнопка пошуку має CSS-властивість float із значенням right, щоб вона позиціонувалася праворуч від контейнера під час анімації.
• Другий дочірній елемент контейнера відповідає за іконку для закриття форми; іконка створюється з використанням псевдо-класів CSS ::before і ::after.

Ось так приблизно виглядає наша HTML структура:

<div class="search-form">
 <div class="input-holder">
  <input type="text" class="search-input" placeholder="Введіть текст для пошуку" />
  <button class="search-icon" >
 
 
Крок №2: Додавання стильового оформлення з допомогою CSS3
 
Перш за все, щоб центрувати елемент форми пошуку по центру сторінки, ми використовуємо position: absolute; і робимо зверху та зліва відступ в 50%.
 
Далі, використовуючи CSS3 властивість transform: translate(x, y), де x та y дорівнюють -50%, ми знаходимо центр поточного положення елемента на сторінці.
 
<style>
.search-form {
 position: absolute;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
}
</style>
 
 
 
Тепер розглянемо стилі для контейнера, в якому розташовується поле input для введення тексту:
 
<style>
.search-form .input-holder {
 height: 70px;
 width: 70px;
 overflow: hidden;
 border-radius: 6px;
 position: relative;
 transition: all 0.3s ease-in-out;
}
.search-form.active .input-holder {
 width: 450px;
 border-radius: 50px;
 background: rgba(0,0,0,0.7);
 transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
</style>
 
Блок з класом .input-holder має 2 різних переходи, один з яких використовує визначену функцію easy-in-out (яка застосовується, коли ви закриваєте вікно пошуку), а другий використовує функцію cubic-bezier (яка застосовується при відкритті вікна).
 
 
 
Далі розглянемо стилі для інших елементів форми пошуку:
 
<style>
.search-input::placeholder {color: #f5f5f5;}
.search-form .input-holder .search-input {
 width: 100%;
 height: 50px;
 padding: 0 70px 0 20px;
 opacity: 0;
 position: absolute;
 top: 0;
 left: 0;
 background: transparent;
 box-sizing: border-box;
 border: none;
 outline: none;
 font-family: "Open Sans", sans;
 font-size: 20px;
 line-height: 20px;
 color: #fff;
 transform: translate(0, 60px);
 transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
 transition-delay: 0.3s;
}
.search-form.active .input-holder .search-input {
 opacity: 1;
 transform: translate(0, 10px);
}
.search-form .input-holder .search-icon {
 width: 70px;
 height: 70px;
 border: none;
 border-radius: 7px;
 background: #f5f5f5;
 padding: 0;
 outline: none;
 position: relative;
 z-index: 2;
 float: right;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
}
.search-form.active .input-holder .search-icon {
 width: 50px;
 height: 50px;
 margin: 10px;
 border-radius: 30px;
}
.search-form .input-holder .search-icon span {
 width: 28px;
 height: 35px;
 display: inline-block;
 vertical-align: middle;
 position: relative;
 transform: rotate(45deg);
 transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-form.active .input-holder .search-icon span {
 transform: rotate(-45deg);
}
.search-form .input-holder .search-icon span::before, .search-form .input-holder .search-icon span::after {
 position: absolute;
 content: '';
}
.search-form .input-holder .search-icon span::before {
 width: 5px;
 height: 15px;
 left: 12px;
 top: 25px;
 border-radius: 2px;
 background: #4080ff;
}
.search-form .input-holder .search-icon span::after {
 width: 20px;
 height: 20px;
 left: 0;
 top: 0;
 border-radius: 15px;
 border: 4px solid #4080ff;
}
.search-form .close {
 position: absolute;
 z-index: 1;
 top: 24px;
 right: 20px;
 width: 25px;
 height: 25px;
 cursor: pointer;
 transform: rotate(-180deg);
 transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
 transition-delay: 0.2s;
}
.search-form.active .close {
 right: -30px;
 transform: rotate(45deg);
 transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
 transition-delay: 0.5s;
}
.search-form .close::before, .search-form .close::after {
 position: absolute;
 content: '';
 background: #fff;
 border-radius: 2px;
}
.search-form .close::before {
 width: 3px;
 height: 15px;
 left: 12px;
 top: 1px;
}
.search-form .close::after {
 width: 15px;
 height: 3px;
 left: 6px;
 top: 7px;
}
</style>
 
 
 
Як згадувалося вище, блок .search-input має абсолютне позиціонування, розтягнуте на 100%. Це означає, що він приймає значення свого батьківського блоку.
 
 
 
Для анімації у нас є 2 стани.
 
Стан при відкритті блоку:
 
Коли відкривається блок .input-holder, ми міняємо непрозорість з 0 на 1 і трансформуємо з translate(0, 60px); в translate(0, 10px);. Що стосується властивості переходу (transition), вона успадковується від попереднього стану.
 
 
 
Стан при закритті блоку:
 
Коли блок .input-holder закривається, ми застосовуємо декілька властивостей CSS3 до блоку .search-input:
 
 
transform: translate(0, 60px); – це переміщує поле для введення по осі Y (вниз) на 60 пікселів
 
opacity: 0; (тут зрозуміло – ми встановлюємо непрозорість на 0, тобто, приховуємо блок)
 
transition-delay: 0.3s; – за допомогою цієї властивості ми «затримуємо» перехід на 3 мілісекунди, щоб отримати більш інтерактивну анімацію
 
після цього ми застосовуємо перехід cubic-bezier, який має функцію хронометражу transition: all .3s cubic-bezier (0.000, 0.105, 0.035, 1.570);
 
 
 
 
Блоки .search-icon і .close використовують ті ж методи для переходу, які описані вище, але з деякими відмінностями. Наприклад, такими як використання властивості переходу в поєднанні з transform: rotate(x deg);. Це дозволяє нам обертати наш елемент навколо його власного центру.
 
Рекомендуємо вам додатково почитати інформацію, яка стосується використання псевдо-класів ::before і ::after для створення міні-іконок. Також зверніть особливу увагу на документацію і уроки по функції cubic-bezier. В мережі Інтернет є маса таких уроків. В майбутньому ми плануємо провести детальний аналіз такої документації на нашому сайті.
 
 
 
Крок №3: Додавання скрипта jQuery, який буде реагувати на зміну стану кнопок
 
Для цього кроку вам знадобиться підключити (якщо ви ще не підключили) бібліотеку jQuery.
 
Можете використовувати CDN версію бібліотеки. Для цього додайте в секцію <head> наступний код:
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
Зверніть увагу, що у нашої основної оболонки .search-form є клас .active, який додається скриптом, і йому присвоюються окремі CSS стилі. Цей клас ми будемо використовувати для перемикання між станами основного дочірнього елемента.
 
 
 
Ми використовуємо функцію searchToggle(), яка додає (або видаляє клас) .active основного блоку .search-form нашої форми пошуку.
 
Код виглядає наступним чином:
 
<script>
function searchToggle(obj, evt){
 var container = jQuery(obj).closest('.search-form');
 if(!container.hasClass('active')){
  container.addClass('active');
  evt.preventDefault();
 }
 else if(container.hasClass('active') && jQuery(obj).closest('.input-holder').length == 0){
  container.removeClass('active');
  container.find('.search-input').val(''); // очищення input
 }
}
</script>
 
 
 
От і все!
 
Нижче представлено демо, яке наочно покаже вам, як працює наша чудова анімована кнопка для пошуку:
 
 
 
 
 
 
Короткий підсумок
 
 Створювати анімацію з допомогою CSS3 можна весело і просто! 
Сподіваємося, що вам сподобався сьогоднішній практичний урок, і ви знайшли його корисним.
 
Якщо у вас є які-небудь питання або пропозиції по даній темі, ви можете залишити їх в розділі коментарів нижче.
 
Дякуємо, що читаєте нас!