15 эффектов анимации для контактных форм

jQuery & JavaScript WordSmall

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

В нашем случае, это будет анимация названий полей формы, которые при нажатии будут эффектно исчезать или преобразовываться и эффект кнопки «Отправить». Все сделано очень удобно и просто. Нужно минимум правок кода, в частности, назначить определенный класс форме, и результат будет достигнут.

Подключение плагина FOXHOLDER

15 эффектов анимации для контактных форм

Демо Скачать

Скачиваем архив с профиля разработчика, разархивируем и достаем папку src. В ней лежат файлы плагина, а именно скрипт и стили оформления. Закачиваем эту папку к себе на сайт и подключаем файлы любым удобным вам способом. И прошу обратить внимание на подключение библиотеки jQuery. Подключайте ее в том случае, если раньше этого не делали.

И еще небольшой фрагмент кода, который инициализирует плагин Foxholder, то есть запускает его. Что также не забудьте добавить. Цифры в запуске placeholderDemo: 1 отвечают за эффект формы и эффект кнопки buttonDemo: 1.

<link rel="stylesheet" href="src/foxholder.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="src/foxholder.min.js"></script>
<!-- инициализировать -->
<script>
jQuery('.your-class').foxholder({
    placeholderDemo: 10, // for placeholder demo (1 - 15)
    buttonDemo: 4 //for button demos (1 - 8), if you need a button effect
  });
</script>

После того как вы подключили плагин, осталось небольшая часть – добавить класс your-class к форме. Вот пример.

<form class="your-class">
    <input id="your-id-1" type="text" placeholder="My Input" />
    <textarea id="your-id-2" placeholder="My Textarea"></textarea>
    <button type="submit">Submit</button>
</form>

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

data-size="sm" — маленькая кнопка
data-size="md" — средняя кнопка
data-size="lg" — большая кнопка

data-effect-parameter="horzVert" — эффект кнопки

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code