Хаки и Скрипты Next Generation CMS

Добавляем интересный вариант анимирования форм для вашего сайта.

irbees2008 irbees2008 Опубликовано - 19 - января Диалоги и lightbox
2359 - 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>

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

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [9]
  • Гости: [9]
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 0.346сек
  • Потребление памяти: 5.890 Mb 
  •   яндекс.ћетрика