Хаки и Скрипты Next Generation CMS : Диалоги и lightbox, HTML5, CSS : Добавляем интересный вариант анимирования форм для вашего сайта.

irbees2008 Опубликовано - 19 - января Диалоги и lightbox

Автор: Мэри Лу
Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css html
Демо:

Вчера увидел одну интересную демку форм,стильная анимация,и просто красиво.Ну а поскольку мне понравилось теперь поставим себе на сайт.Можно применить в форме регистрации ,входа,в обратной связи,в любой форме где надо вводить данные.
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем папки в папку с нашим шаблоном,или в корень сайта ,или создаете отдельную директорию ,это как хотите.
2.Ну я наверное как всегда возьму для разбирательства первый вариант,все варианты находятся в файле index.html.
3.В main.tpl в хеад подключаем стили,

Код:

<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/component.css" />

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

Код:

<span class="input input--haruki">
					<input class="input__field input__field--haruki" type="text" id="input-1" />
					<label class="input__label input__label--haruki" for="input-1">
						<span class="input__label-content input__label-content--haruki">Имя</span>
					</label>
				</span>
				<span class="input input--haruki">
					<input class="input__field input__field--haruki" type="text" id="input-2" />
					<label class="input__label input__label--haruki" for="input-2">
						<span class="input__label-content input__label-content--haruki">Фамилия</span>
					</label>
				</span>
				<span class="input input--haruki">
					<input class="input__field input__field--haruki" type="text" id="input-3" />
					<label class="input__label input__label--haruki" for="input-3">
						<span class="input__label-content input__label-content--haruki">Email</span>
					</label>
				</span>

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

Код:

<script src="{{ tpl_url }}/js/classie.js"></script>
		<script>
			(function() {
				// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
				if (!String.prototype.trim) {
					(function() {
						// Make sure we trim BOM and NBSP
						var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
						String.prototype.trim = function() {
							return this.replace(rtrim, '');
						};
					})();
				}

				[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
					// in case the input is already filled..
					if( inputEl.value.trim() !== '' ) {
						classie.add( inputEl.parentNode, 'input--filled' );
					}

					// events:
					inputEl.addEventListener( 'focus', onInputFocus );
					inputEl.addEventListener( 'blur', onInputBlur );
				} );

				function onInputFocus( ev ) {
					classie.add( ev.target.parentNode, 'input--filled' );
				}

				function onInputBlur( ev ) {
					if( ev.target.value.trim() === '' ) {
						classie.remove( ev.target.parentNode, 'input--filled' );
					}
				}
			})();
		</script>

Можешь почитать и вот эту статейку "Анимированная гирлянда для сайта"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.