NiceSnippets.com
Fancy Input Box Typing Animation Effect
New Input Typing effect with light weight plugin. Makes typing & deleting in input and Textarea fields exciting & fun. we are giving you demo of input box animation of text. this is fancy new effective textbox design.
We allows to free snippets of text input animation , you can download full code of v layout. Here in this post i will give you example of text input effects css snippet and you will get simple code of html, css and jquery. In text input effects css snippet i give you three tab with html, css and js, you can easily get code of text box animation css layout.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Fancy Input typing effects for input fields using only html css </title>
<link rel="stylesheet" type="text/css" href="custom.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="main-section">
<div class="effect-section">
<menu>
<button class='active'>Effect 1</button>
<button>Effect 2</button>
<button>Effect 3</button>
</menu>
</div>
<div id='content'>
<section class='input'>
<div>
<input type='text' placeholder='Welcome To Nicesnippets ..'>
</div>
</section>
<section class='textarea'>
<div>
<textarea cols='5'></textarea>
</div>
</section>
</div>
</div>
<script src='http://yaireo.github.io/fancyInput/fancyInput.js'></script>
<script src='custom.js'></script>
</body>
</html>
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
text-align:center;
}
.main-section{
width:100%;
height:100%;
position:relative;
background:-webkit-radial-gradient(#FFB85F,#FF7A5A);
overflow:hidden;
}
.effect-section{
position:absolute;
z-index:999;
top:0;
left:0;
width:100%;
padding:10px 0;
text-align:center;
}
.effect-section menu{
display:inline-block;
vertical-align:top;
overflow:hidden;
margin:170px 20px;
}
.effect-section menu button{
margin:0;
cursor:pointer;
color:#333;
padding:15px 20px;
margin-left: 10px;
text-shadow:0 1px #DDD;
background-color: #9B2F10;
border-radius: 6px;
letter-spacing: 2px;
border:0;
color:#fff;
border-left:1px solid rgba(0,0,0,0.2);
-webkit-transition:.1s; transition:.1s;
}
.effect-section menu button:hover{
background-color: #C73B0B;
}
.effect-section menu button:first-child{
border:0;
}
.effect-section menu button.active{
background-color: #C73B0B;
}
menu.radio{
background:#EEE;
position:relative;
padding-left:10px;
margin-left:10px;
}
menu.radio:nth-child(2){
color: red !important;
}
menu.radio span{
opacity:.5;
color:#222;
font-family:'Fjalla One', sans-serif;
cursor:pointer;
padding:6px 12px;
display:inline-block;
-webkit-transition:0.2s ease-out;
transition:0.2s ease-out;
}
menu.radio :checked ~ span{
color:green;
}
menu.radio label:hover span{
opacity:1;
color:#000;
}
menu.radio input{
display:none;
}
#content{
position:absolute;
width:200%;
height:100%;
-webkit-transition:.6s cubic-bezier(0.02, 0.6, 0.2, 1);
transition:.6s cubic-bezier(0.02, 0.6, 0.2, 1);
}
#content section{
width:50%;
height:100%;
float:left;
}
#content section::before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.fancyInput{
max-width:80%;
min-width:50%;
font-size:60px;
color:#FFF;
vertical-align:middle;
line-height:1.3;
overflow:hidden;
text-align:left;
box-shadow:0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.2) inset, 0 0 12px rgba(255,255,255,.1);
padding:8px 20px;
background:rgba(0,0,0,.1);
border-radius:10px;
}
@charset "IBM437";
@keyframes caret {
50% {
opacity: 0.1;
transform: scaleY(0.8); } }
@-webkit-keyframes caret {
50% {
opacity: 0.1;
-webkit-transform: scaleY(0.8); } }
.fancyInput {
display: inline-block;
letter-spacing: -1px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
white-space: nowrap;
width: auto;
font-family: "Fjalla One", sans-serif;
position: relative;
}
.fancyInput ::-webkit-input-placeholder {
color: transparent;
}
.fancyInput :-moz-placeholder {
color: transparent;
}
.fancyInput ::-moz-placeholder {
color: transparent;
}
.fancyInput :-ms-input-placeholder {
color: transparent;
}
.fancyInput.textarea {
white-space: normal;
overflow: auto;
}
.fancyInput input, .fancyInput textarea {
color: transparent;
position: absolute;
z-index: 2;
width: 100%;
border: 0;
outline: 0;
top: 0px;
left: 0;
background: none;
padding: inherit;
padding-bottom: 0;
font-size: inherit;
letter-spacing: -1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.fancyInput textarea {
word-break: break-all;
overflow: hidden;
height: 100%;
}
.fancyInput > div {
display: inline-block;
position: relative;
}
.fancyInput > div:before {
opacity: 0;
left: -20px;
content: attr(data-placeholder);
position: absolute;
transition: 0.3s ease-out;
}
.fancyInput > div.empty:before {
opacity: 0.2;
left: 0;
}
.fancyInput input:focus ~ div.empty:before {
opacity: .1;
}
.fancyInput.textarea > div {
width: 99.9%;
}
.fancyInput *:focus ~ .caret,
.fancyInput *:focus ~ div .caret {
opacity: .8;
box-shadow: 0 0 8px #FFF;
-webkit-animation: 0.4s 40ms caret infinite;
animation: 0.4s 40ms caret infinite;
}
.fancyInput .caret {
font-weight: normal;
opacity: 0;
display: inline-block;
width: 3px;
margin-left: -3px;
background: #FFF;
border-radius: 4px;
-moz-user-select: none;
}
.fancyInput span:not(.deleted) ~ .caret {
position: absolute;
margin: 0;
}
.fancyInput > div span {
-webkit-transition: 100ms cubic-bezier(0, 0.6, 0.55, 1.4);
transition: 100ms cubic-bezier(0, 0.6, 0.55, 1.4);
display: inline-block;
position: relative;
}
.effect2 .fancyInput > div span.state1, .effect2 .fancyInput > div span.state2 {
-webkit-transform: translateX(10px) scale(1.8);
transform: translateX(10px) scale(1.8);
}
.effect3 .fancyInput > div span {
-webkit-transition: 200ms cubic-bezier(0, 0.6, 0.55, 1.4);
transition: 200ms cubic-bezier(0, 0.6, 0.55, 1.4);
}
.effect3 .fancyInput > div span.state1, .effect3 .fancyInput > div span.state2 {
opacity: 0;
-webkit-transform: scale(0.4);
transform: scale(0.4);
-webkit-filter: blur(2px);
}
(function(){
var viewTogglers = $('menu.radio input');
$(document).on('keydown', function(e){
if( e.key == 'tab' || e.keyCode == 9 ){
var $checked = viewTogglers.filter(':checked');
var $next = viewTogglers.eq(viewTogglers.index($checked) + 1);
if(!$next.length){
$next = viewTogglers.first();
}
$next.prop("checked", true).change();
return false;
}
});
})();
$('section :input').val('').fancyInput()[0].focus();
function init(str){
var input = $('section input').val('')[0],
s = 'Welcome To Nicesnippets .. ✌'.split('').reverse(),
len = s.length-1,
e = $.Event('keypress');
input.nextElementSibling.className = '';
var initInterval = setInterval(function(){
if( s.length ){
var c = s.pop();
fancyInput.writer(c, input, len-s.length).setCaret(input);
input.value += c;
}
else clearInterval(initInterval);
},150);
}
init();
$('menu').on('click', 'button', toggleEffect);
$('menu.radio').on('change', 'input', changeForm).find('input:first').prop('checked',true).trigger('change');
function toggleEffect(num){
var className = '';
idx = $(this).index() + 1,
$fancyInput = $('.fancyInput');
if( idx > 1 )
className = 'effect' + idx;
$('#content').prop('class', className);
$fancyInput.find(':input')[0].focus();
$(this).addClass('active').siblings().removeClass('active');
}
function changeForm(e){
var page = this.value,
highlight = $(e.delegateTarget).find('> div'),
label = $(this.parentNode),
marginLeft = parseInt( label.css('margin-left') , 10 ),
xPos;
highlight.css({'left':label.position().left + marginLeft, 'width':label.width() });
xPos = '-' + label.index() * 50;
$('#content').css( 'transform', 'translateX(' + xPos + '%)' );
setTimeout(function(){
$('#content').find('.' + page + ' :input')[0].focus();
}, 100);
}
