March 6, 2015

Animating labels for input form

Animating labels for input form

Animating float labels are cool for small screens and can be awesomely animated by breaking down the labels into individual characters and then playing around with it.

When the user focuses on an input field individual letters are animated into an HTML fieldset like feel using jQuery.

HTML

<main>
  <h1>Login</h1>
  <form class="flp">
    <div>
      <input type="text" id="email" />
      <label for="email">Email</label>
    </div>
    <div>
      <input type="password" id="password" />
      <label for="password">Password</label>
    </div>
    <div>
      <button>Login</button>
    </div>
  </form>
</main>

CSS

* {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}

body {
 font-family: Sniglet;
}

main {
 width: 500px; 
  margin: 0 auto; 
  padding-bottom: 10px;
 background: white; 
  border-radius: 3px; 
  overflow: hidden;
}

h1 {
 font-size: 24px; 
  font-weight: normal;
 background: #4f3043; 
  color: #d94362;
 text-align: center; 
 padding: 20px 0; margin-bottom: 40px;
}

.flp {
  padding: 0 50px;
}

.flp div {
  position: relative; 
  margin-bottom: 30px;
}

.flp input, .flp label {
 width: 400px; 
  display: block;
 font: inherit; 
  font-size: 16px; 
  line-height: 24px;
 height: 46px;
 border: 1px solid #999;
}

.flp input {
  padding: 10px;
  outline: none; 
  border-radius: 3px;
}

.flp button {
  width: 400px;
  padding: 10px;
  outline: none; 
  border-radius: 3px;
  font: inherit; 
  font-size: 16px; 
  line-height: 24px;
 height: 46px;
  background: #4f3043; 
  color: white;
  border: none;
  cursor: pointer
}

.flp label {
 position: absolute; 
  left: 0; 
  top: 0;
 padding: 10px 8px;
 border-color: transparent; 
  color: #666;
 cursor: text;
}

.ch {
 display: block; float: left;
 position: relative;
 background: white; 
}

.ch:first-child {
  padding-left: 2px;
}

.ch:last-child {
  padding-right: 2px;
}

.focussed {
 pointer-events: none;
}

jQuery

$(".flp label").each(function(){
 var sop = '';
 var scl = '';
 $(this).html(sop + $(this).html().split("").join(scl+sop) + scl);
 $(".ch:contains(' ')").html(" ");
})

var d;
$(".flp input").focus(function(){
 var tm = $(this).outerHeight()/2 *-1 + "px";
 $(this).next().addClass("focussed").children().stop(true).each(function(i){
  d = i*50;
  $(this).delay(d).animate({top: tm}, 200, 'easeOutBack');
 })
})
$(".flp input").blur(function(){
 if($(this).val() == "")
 {
  $(this).next().removeClass("focussed").children().stop(true).each(function(i){
   d = i*50;
   $(this).delay(d).animate({top: 0}, 500, 'easeInOutBack');
  })
 }
})

Attachments:

I have used external attachments.


http://fonts.googleapis.com/css?family=Sniglet


https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js
demo

No comments:

Post a Comment

Popular Posts

Views