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

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

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

Можешь почитать и вот эту статейку "Плагин "downloadcounter""

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

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

Теги

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

Статистика

  • Caйту: 4374 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Google
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 34
  • Генерация страницы: 0.444сек
  • Потребление памяти: 5.200 Mb 
  •   Яндекс.Метрика