Home / Frontend Codes and Demos / CSS Code Demos / Weird input animation and useful for visually impaired users
Weird input animation and useful for visually impaired users

Weird input animation is really awesome with fun and useful for visually impaired users too. Developed using css, html and javascript. demo and download avilable.

Weird input animation and useful for visually impaired users

Weird input animation and useful for visually impaired users

Weird input animation is really awesome with fun and useful for visually impaired users too. Developed using css, html and javascript. demo and download avilable.

Demo Download

Author Jack Pack
Hits
Created SEPTEMBER 19, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<main class="container"> <h1>Weird Input</h1>   <div class="nice-input">     <input type="text" id="test" v-model="message" />     <label for="test">       <span class="nice-input__animate" v-for="m in message2">{{m}}</span>     </label>     </div>   </main> 

CSS Code

body {   background: #84fab0;   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);   font-family: 'Lato', sans-serif;   font-size: 14px;   overflow:hidden; }  .red {   background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); }  .container {   position:absolute;   left:50%;   top:50%;   transform: translate(-50%,-50%);   margin-top:-30px;   text-align:center; }  h1 {   color: #fff;   text-transform: uppercase;   margin-bottom: 10px; }  .nice-input {   position: absolute; }  .nice-input input {   border:none;   border-radius:4px;   padding:7px 10px;   font-family: 'Lato', sans-serif;   font-size:14px;   box-shadow: rgba(0,0,0,.05) 0 5px 20px;   letter-spacing:0;   width:165px;   color: transparent;   font-weight:900; }  .nice-input input:focus {   outline:none;   box-shadow: rgba(0,0,0,.1) 0 5px 20px; }  .nice-input label {   position: absolute;   top: 6px;   left: 10px;   letter-spacing:0;   font-size:0; }  .nice-input span {   font-family: 'Lato', sans-serif;   font-size:14px;   font-weight:900; }  .nice-input__animate {   animation: print .2s 1 ease-in-out; }  .shake {   animation: shake .2s 1 ease-in-out; }  @keyframes print {   from{   position:absolute;   transform: scale(50);   /* uncomment for freeze */     /*   filter:blur(1px); */   }   99% {   position:absolute;   }   to {   position:relative;   } }  @keyframes shake {   from,   to {   }   50% {     transform:scale(0.97);   } }

JavaScript Snippet

var app = new Vue({   el: '.container',   data: {     message: ''   },   watch: {     message: {       handler: function(after,before){         if (after.length > before.length) {          setTimeout(function(){             document.querySelector('.nice-input').classList.add('shake');            setTimeout(function(){             document.querySelector('.nice-input').classList.remove('shake');             },300);            },200);         }       }     }   },   computed: {     message2: function(){       return this.message.split('');     }   } });

Preview

Weird input animation and useful for visually impaired users preview

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …