Анимированная форма поиска с помощью CSS3 и jQuery | RUDEBOXФорма поиска, на больших сайтах, является неотъемлемой его частью. Она позволяет быстро и удобно найти пользователю необходимую информацию, а это означает, что посетитель не будет томительно блуждать просторами вашего сайта и, возможно, так и не найдет то, что ищет. Мы уже не раз рассказывали о уроках данного рода, но все они по своему интересны. В данном уроке мы рассмотрим несколько, весьма интересных, примеров создания анимированной формы поиска реализованной с помощью jQuery и CSS3.

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

Чтобы реализовать, данный эффект нам понадобятся трансформации CSS3, а это означает, что полноценно будет работать только в современных, нормальных, браузерах, ну если вы поняли о чем я. Давайте приступим.

Пример №1. Простая анимация

Анимированная форма поиска с помощью CSS3 и jQuery RUDEBOX

Шаг 1. HTML

Для начала нам необходимо создать простенькую разметку, которая будет содержать класс формы, подпись, и небольшую пикчу, а именно иконку поиска.

Как вы заметили, ничего сложного нет, давайте рассмотрим стили.

Шаг 2. CSS

Нам необходимо установить общее позиционирование на странице, кроме этого создать градиентные переходы для кнопок, не стоит забывать о важности теней, для достижения иллюзии объемности.

Шаг 3. JavaScript

Для достижения простой анимации нам понадобится следующий скрипт:

Пример №2. Кубическая анимация

Анимированная форма поиска с помощью CSS3 и jQuery RUDEBOX

Шаг 1. HTML

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

Шаг 2. CSS

Стили нам необходимо определить как и в первом примере, только для двух поверхностей:

Шаг 3. JavaScript

Анимацию реализуем следующим образом:

Пример №3. Кубическая анимация с разворотом.

Анимированная-форма-поиска-с-помощью-CSS3-и-jQuery-RUDEBOX

Шаг 1. HTML

Разметка схожа со вторым примеров. Отличие только в классах.

Стили аналогичные со вторым примером, повторятся не будем.

Шаг 2. JavaScript

И соответственно нам необходима анимация.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.