Домой / Для сайта / Анимационный ввод текста
Анимационный ввод текста

Анимационный ввод текста

В этом примере реализован эффект анимации для ввода текста. Используя этот пример вы можете придать оригинальности например, своей контактной форме или любой другой запросной форме, где нужно вводить текст.

Изменяя CSS свойство animation вы можете сделать время анимации быстрее или медленнее.

Демо

HTML

<form>
 <h1>Анимационный ввод текста:</h1>
 <div class="bloop" id="blooper">
 <input type="text"/>
 <div>
 <i class="carrat">|</i>
 </div>
 </div>
</form>

CSS

body {
 background: #333;
 font-family: sans-serif;
}
@keyframes blink {
 0% {
 opacity: 0.0;
 }
 50% {
 opacity: 1.0;
 }
 100% {
 opacity: 0.0;
 }
}
@keyframes letter {
 0% {
 color: #87d8ff;
 transform: scale(2, 2) translateX(7px);
 }
 100% {
 color: #004f75;
 transform: scale(1, 1) translateX(0px);
 }
}
h1 {
 font-weight: 100;
 color: #87d8ff;
 font-size: 28px;
}
form {
 width: 400px;
 margin: 120px auto;
}
form span {
 color: #87d8ff;
 font-weight: 100;
 padding-bottom: 10px;
 display: inline-block;
}
.bloop {
 width: 400px;
 height: 40px;
 margin: 0px auto;
 position: relative;
}
.bloop input {
 width: 100%;
 height: 100%;
 border: none;
 font-size: 20px;
 color: transparent;
 background: transparent;
 position: absolute;
 z-index: 2;
 padding-left: 15px;
}
.bloop input:focus {
 outline-color: transparent;
 outline-style: none;
 outline: none;
}
.bloop input:focus + div {
 background: #999;
}
.bloop input:focus + div .carrat {
 display: inline-block;
}
.bloop div {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 line-height: 40px;
 background: #777;
 font-family: sans-serif;
 font-size: 20px;
 padding: 0px 15px;
}
.bloop div .carrat {
 display: none;
 color: #87d8ff;
 font-size: 35px;
 opacity: 1.0;
 font-style: normal;
 animation: blink 0.8s linear infinite;
 font-size: 31px;
 font-weight: 100;
 position: relative;
 top: -3px;
 right: -7px;
}
.bloop div span {
 position: relative;
 top: -4px;
 transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
 animation: letter 0.5s cubic-bezier(0.08, 0.6, 0.56, 1.4);
 display: inline-block;
 color: #004f75;
 font-size: 20px;
 font-weight: 100;
}

JS

var $input = $('.bloop input');
var $div = $('.bloop div');
var $carrat = $('.bloop div .carrat');

var current = '';

function addLetters(letters) {
 var delay = 200;
 var base = 0;
 letters.split('').forEach(function(letter, i) {
 console.log('delaying %d on letter %s', i*delay, letter);
 setTimeout(function() {
 if (letter === ' ') { letter = '&nbsp;'; }
 var span = '<span>' + letter + '</span>';
 $carrat.before(span);
 }, delay * i);
 });
}

function deleteLastLetter() {
 $div.find('span:last').remove();
}

function indexOfChange(a, b) {
 var i = 0;
 while (a.charAt(i) === b.charAt(i)) { i++; }
 return i;
}

// keypress only fires for 'readable' content
$input.on('input', function(e){
 var val = this.value;
 var idx = indexOfChange(current, val);
 var base = current.slice(0, idx);
 
 // shrink current and displayed down to base size
 while(current.length > base.length) {
 deleteLastLetter();
 current = current.slice(0, current.length - 1);
 }
 
 // adding
 if (val.length > base.length) {
 var letters = val.slice(idx);
 addLetters(letters);
 current = val;
 }

});

В этом примере реализован эффект анимации для ввода текста. Используя этот пример вы можете придать оригинальности например, своей контактной форме или любой другой запросной форме, где нужно вводить текст. Изменяя CSS свойство animation вы можете сделать время анимации быстрее или медленнее. HTML CSS body { background: #333; font-family: sans-serif; } @keyframes blink { 0% { opacity: 0.0; } 50% { opacity: 1.0; } 100% { opacity: 0.0; } } @keyframes letter { 0% { color: #87d8ff; transform: scale(2, 2) translateX(7px); }&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.9 ( 1 голосов )
95

Оставить комментарий

Ваш email не будет опубликован.

*