15 примеров контактной формы для сайта
 | |
| Отличная подборка на анимацию для заполнителя формы обратной связи, где вашему вниманию предоставлено 15 анимационных оригинальных эффектов. Все варианты просты в использование, только по функции они друг от друга отличаются, также есть некоторые формы с оригинальными элементами, что будет происходить при клике. Так как нужно заполнять название и само описание, где после клика у каждого варианта предусмотрен свой уникальный метод подачи. Как всем известно, что на интернет ресурсе контактные формы являются одной из очень частью интернет сайта или блога. Так как на любой площадке можно найти свою связь, которая на каждом хостинг своя оригинальная, но теперь вы можете установить совершенно непохожие на другие, но с аналогичными функциями. Следовательно, нужно понимать, что изначально их стиль внешнего вида как можно ближе к основному дизайн должен соответствовать. 1. Есть возможность выполнить плавную и оптимизированную для CSS3 анимацию. 2. Пятнадцать разных по своему стилю эффектов, которые подключены к анимации. 3. Совместим с браузерами IE 9+, Safari 9+, FF, Opera и другими популярными программами. Так выглядит в работе одна из многих форм:  Приступаем к установке: HTML Основная HTML-структура анимации заполнителя-заполнителя с использованием плагина foxholder.js выглядит следующим образом: Код <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" — эффект кнопки Так как они имеют дополнительные атрибуты, где выставляем заданный размер, плюс эффект. Первое, что делаем, это скачиваем архив и находим там папку src, в ней будут находиться файлы плагина, а точнее скрипт и стилистика, что идет под оформления всех вариантов. Так вот скачали, теперь остается все папки подключить. Где аналогичным способом подключаем библиотеку jQuery, это делается только в случае, если уже на сайте не подключена была ранее. Также нужно запустить код и плагин Foxholder, где сразу добавляются цифры, которые идут под запуск placeholderDemo: 1 - где на прямую отвечает за тот самый эффект формата формы и также кнопки buttonDemo: 1. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |