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="http://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); }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post