3D форма поиска для сайта на JQuery и CSS3! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQuery3D форма поиска для сайта на JQuery и CSS3!
Дата: 18.05.2013 в 23:54 | Просмотров: 7305

3D форма поиска для сайта на JQuery и CSS3!

форма поиска для сайта
Скачатьбесплатно с сервера
Демодемонстрация

В последнее время красивая форма поиска для сайта создается не только с помощью CSS3, но и с JavaScript. Например, часто можно встретить форму поиска, которая расширяется после активации поля пользователем. Вопрос в том, насколько мы сможем стилизовать эту поисковую форму? Также смотрите мини-коллекцию форм ввода текста с иконками, в которой собраны современные поля.

В этом уроке мы будем создавать форму поиска, на уровень выше обычной формы, с применением JQuery и CSS3. Форма поиска JQuery будет привлекать внимание пользователя и повышать юзабилити вашего сайта. В нашем примере мы рассмотрим 3 варианта оформления поисковой формы:

  • стиль "Simple";
  • стиль "Cube";
  • стиль "Cube" + анимация.

Давайте рассмотрим каждый из них подробнее, и способы реализации красивого эффекта формы.

Стиль поиска → Simple

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

форма поиска jquery - эффект 1

На основании картинке выше, форма HTML будет состоять из 4-х элементов: DIV для обертки, элемента input text, кнопки ввода поиска и изображения. Все они будут расположены друг за другом, где DIV оберткой находится в самой нижней части и поиск изображений на самом верху. Вот HTML разметка:

И все необходимые CSS стили:

Теперь мы будем читать событие нажатия на кнопку поиска и анимировать форму поиска с помощью JQuery.

Скрипт анимации: сначала необходимо нажать на кнопку поиска, и тем самым расширить обертку div и поле ввода текста input, переместите кнопку поиска (она же “отмена”) и переместить изображений поиска влево, чтобы заполнить пустое пространство перед формой ввода текста. Второй щелчок на кнопку “×”, вернет все в первоначальное состояние.

Стиль поиска → Cube

После создания простой анимации формы поиска, на самом деле мы не продвигаемся слишком далеко, и это ещё не всё. Таким образом, мы сделаем еще один эффект, который, на моё мнение, более крут. Как насчет показа вращающейся формы поиска в 3D? CSS3 свойства, такие как преобразование transform, перспективы и анимации будут очень полезны. Проверена корректная работа в Chrome 25, Safari 5+, Firefox 19, Yandex Browser 1.5…

форма поиска jquery

Создание куба немного сложно для вертикального поворота и в одном направлении (сверху вниз), поэтому можно создать куб, сделав 2 тега div, первый div как передняя грань куба, а второй div в качестве верхней стороны. Верхняя сторона div должна быть повернута так, что это будет все равно что прийти сверху, когда куб вращается.

схема поворота формы поиска в 3D

Структура html кода будет следующей:

Класс wrapper1 выступает в качестве обертки для всех элементов внутри, content-wrapper1 как обертка, которая будет вращать форму поиска, кнопка search-button1 в качестве верхней стороны и search-box1 как лицевая сторона.

CSS3 стилизация формы:

Это только часть кода, теперь мы будем читать события щелчка пользователя и вращать куб в 3D.

Этот скрипт выступают в качестве доверителя анимации, так как все анимации обрабатываются через CSS. Также мы имеем кнопку, для возврата в нормальное состояние. Сначала показана одна сторона, в то время как другая скрыта, до тех пор, пока анимация не работает. После активации пользователем формы, происходит этот трюк перехода в 3D.

Стиль поиска → Cube + анимация!

В этом примере мы оживим ещё больше нашу форму. Помимо вращения куба, мы уменьшаем ширину передней стороны и расширим её до вращения. В общем, смотрите картинку ниже, и Вы все поймете.

форма поиска + анимация

Мы используем JQuery функцию animate(), чтобы расширить ширину передней стороны и снизить ей обратно, когда пользователь нажимает на кнопку закрытия формы.

Заключение

Вот и форма поиска для сайта готова!Как видите комбинация CSS3 и JQuery может помочь нам улучшить текущий веб-интерфейс нашего сайта до неограниченного предела, всё зависит от нашего воображения. Надеюсь Вам было интересно! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Вроде все делаю правильно, но у меня выходит сразу вот это http://data3.floomby.com/files/share/22_12_2013/yXXDFrCTukKioIUdHefNXw.jpg и ни на что не реагирует. Кто знает в чем дело?

Добавить комментарий