Заработок в интернете и раскрутка вашего сайта Четверг, 21.09.2017, 06:14

Меню сайта
Категории раздела
Скрипты для uCoz [119]
Все скрипты uCoz для улучшения Вашего сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Яндекс.Метрика Яндекс цитирования
Главная » Статьи » Скрипты для uCoz » Скрипты для uCoz

Эффект ввода сообщений в текстовые поля для uCoz

Эффект ввода сообщений в текстовые поля для uCoz

[ Скачать с сервера (4.9Kb) ]

Что у нас есть на тему ввода текстовых сообщений? Хочется необычного и красивого плагина, который эту проблему превратить из насущной, в приятную и решенную. Вот как раз наткнулся на такой продукт Ucoz - шикарнейший плагин, который неожиданно и оригинально визуализирует ввод сообщений в  текстовые поля на сайте.

Какие такие эффекты, спросите вы. Fancy input предлагает несколько  вариантов анимированных дизайнов ввода - это и эффект пишущей машинки, только современной и стильной, на которой буковки четко выпрыгивают испод курсора. Или появляются в поле большими, но резко уменьшаются, как бы сжимаясь, когда попадают в ваше текстовое окно - съеживаются, правильнее сказать. Очень эффектно смотрится еще один эффект - таинственное, но быстрое появление букв из центра вводимого пространства. Вообщем дизайнеры постарались на славу - плагин работает четко и много места на сайте не займет. А выбирая эффекты ввода текста, вы проведете занимательные часы, это мы вам гарантируем - плагин заставляет немного на нем залипнуть. Скачивайте, смотрите, адаптируйте под стиль своего сайта.

Важно! Скрипт из прикреплённого архива залейте в папку js, стиль в папку css

Установка:

После /head на нужных страницах вставляйте:

<linkrel="stylesheet"href="/css/fancyInput.css">
<scriptsrc='/js/fancyInput.js'></script>
<style>
.fancyInput {
min-width:300px;
max-width:250px;
font-size:16px;
color:#FFF;
vertical-align: middle;
line-height:1.3;
overflow: hidden;
text-align: left;
box-shadow:01px0 rgba(255,255,255,.15),02px4px rgba(0,0,0,.2) inset,0012px rgba(255,255,255,.1);
padding:8px20px;
background: rgba(0,0,0,.1);
border-radius:5px;
}
</style>

Текстовое поле стилизуйте на своё усмотрение 

Вот так оформляются текстовые поля:

<divid='content'class="effect4">
<!-- класс effect4 - это номер эффекта вывода текста. Всего эффектов 5. Выставляйте тот, что вам понравится-->
<sectionclass='input'>
<div>
<inputtype='text'/>
</div>
</section>
</div>


В самый низ страницы после /body вставляйте:

$('section :input').val('').fancyInput()[0].focus();
// Everything below is only for the DEMO
function init(str){
var input = $('section input').val('')[0],
s ='http://apo-ucoz.com - уникальные скрипты для uCoz'.split('').reverse(),
len = s.length -1,
e = $.Event('keypress');

var initInterval = setInterval(function(){
if(s.length){
var c = s.pop();
fancyInput.writer(c, input, len - s.length).setCaret(input);
input.value += c;
//e.charCode = c.charCodeAt(0);
//input.trigger(e);

}else clearInterval(initInterval);
},150);
}

init();



Нравится
Категория: Скрипты для uCoz | Добавил: admin (24.12.2013)
Просмотров: 194 | Рейтинг: 0.0/0


Нравится







Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Наш баннер
Мы будем признательны,
если Вы разместите нашу кнопку
у себя на сайте!

Заработок в интернете и раскрутка вашего сайта


Языки
Заработок в интернете и продвижение вашего сайта © 2013-2017
Копирование материалов сайта без согласия запрещено!

Яндекс.Метрика

СЕГОДНЯ НАС ПОСЕТИЛИ:

200