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.

You might also like

CSS Shapes Forest Collection Spring Summer 2020

October 11, 2020

0

CSS Button Concept for Remove and Success

August 21, 2019

0

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);
  
  }
  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