В сьогоднішньому уроці ми на практиці розглянемо те, як можна створити просту, але дуже красиву кнопку для пошуку, всього лише з допомогою CSS3 і jQuery.
Готова кнопка буде виглядати приблизно так:
Для створення такої гарної анімованої кнопки для вікна пошуку ми будемо використовувати наступні інструменти:
Деякий час тому назад розробники анімували HTML елементи, змінюючи значення CSS властивостей за допомогою JavaScript. Цей підхід вже застарів. Сьогодні ж, завдяки CSS3, ми можемо анімувати елементи на сторінці набагато швидше, простіше, а результати будуть дійсно вражаючими!
Отже, давайте перейдемо до практики!
Перш за все, створимо контейнер div
з класом search-form
. У ньому буде розташовуватися наша форма пошуку.
Всередині створимо два блоки: один для поля введення input
і самої кнопки пошуку, а другий для кнопки закриття (або «згортання») форми.
Зверніть увагу:
float
із значенням right
, щоб вона позиціонувалася праворуч від контейнера під час анімації.::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 мілісекунди, щоб отримати більш інтерактивну анімаціюtransition: all .3s cubic-bezier (0.000, 0.105, 0.035, 1.570);
Блоки .search-icon
і .close
використовують ті ж методи для переходу, які описані вище, але з деякими відмінностями. Наприклад, такими як використання властивості переходу в поєднанні з transform: rotate(x deg);
. Це дозволяє нам обертати наш елемент навколо його власного центру.
Рекомендуємо вам додатково почитати інформацію, яка стосується використання псевдо-класів ::before
і ::after
для створення міні-іконок. Також зверніть особливу увагу на документацію і уроки по функції cubic-bezier. В мережі Інтернет є маса таких уроків. В майбутньому ми плануємо провести детальний аналіз такої документації на нашому сайті.
Для цього кроку вам знадобиться підключити (якщо ви ще не підключили) бібліотеку 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 можна весело і просто!
Сподіваємося, що вам сподобався сьогоднішній практичний урок, і ви знайшли його корисним.
Якщо у вас є які-небудь питання або пропозиції по даній темі, ви можете залишити їх в розділі коментарів нижче.
Дякуємо, що читаєте нас!
Якщо хочеш пізнати людину, не слухай, що про неї говорять інші, послухай, що вона говорить…
Вибачення — не означає, що ти не правий, а інша людина має рацію. Це всього…
Атмосферу паперової книги, запах свіжого чорнила і паперу, що трохи залежався, складно замінити гаджетами. Але…
View Comments
Доброго дня, підкажіть як до цього пошуку додати базу даних (тощо) - для отримання результатів при пошуку
Цікаве питання, дякую! Можливо згодом напишу інструкцію по реалізації даної задачі. Якщо ж коротко: вам потрібно додати форму, обробником буде PHP скрипт, в якому буде підключення до бази даних та вибірка інформації. Приблизну реалізацію можете почитати на нашому сайті тут https://sebweo.com/yak-vikoristovuvati-html-formi-v-php/ та тут https://sebweo.com/yak-pratsyuvati-z-bazoyu-danih-mysql-v-php/ .