Эффект ввода сообщений в текстовые поля для 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();
|
Нравится
| 
