• 1310
  • 0
  • Автор: Мэри Лу
  • Адаптировал: 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>

Можешь почитать и вот эту статейку "Асинхронная загрузка CSS"

mistakes

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

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

Ваше мнение

Вы нашли что искали?
Результаты

----