Animated float labels | Забавная анимация для меток

<main> <h1>Стильная форма</h1> <form class="flp"> <div> <input type="text" id="fname" /> <label for="fname">Позывной</label> </div> <div> <input type="email" id="email" /> <label for="email">Электропочта</label> </div> </form> </main> <br> Somebody fork and rewrite without using jquery.easing.min.js even better in velosityJS, I even have a couple of gold coins :) <br> <br> Кто нибудь форкните и перепишите без использования jquery.easing.min.js, ещё лучше на velosityJS, я даже пару золотых монет дам :) @Vampireos
/*basic reset*/ * {margin: 0; padding: 0; box-sizing: border-box;} body { color:rgba(0,0,0,.6); margin: 5%; font-family: Ubuntu, sans-serif; background:white; } main { width: 500px; margin: 0 auto; padding-bottom: 10px; border-radius:3px; border:.125rem solid rgba(0,0,0,.2); } h1 { font-size: 24px; font-weight: normal; color: rgba(0,0,0,.2); text-align: center; margin-bottom: 20px; } .flp {padding: 0 50px;} /*Let's place the label over the input*/ .flp div {position: relative; margin-bottom: 30px;} .flp input, .flp label { width: 400px; display: block; font: inherit; font-size: 16px; line-height: 24px; /*fixed height for FF line height issue. height = 24(lineheight) + 10*2(padding) + 2(border)*/ height: 46px; border: .125rem solid rgba(0,0,0,.2); } .flp input {padding: 10px; outline: none; border-radius: .2rem;} .flp label { position: absolute; left: 0; top: 0; /*left/right padding will be 2px less, adjusted by padding on .ch*/ padding: 10px 8px; border-color: transparent; color: rgba(0,0,0,.3); font-weight: bold; cursor: text; text-transform: uppercase; } /*label styles*/ .ch { display: block; float: left; position: relative; /*for upward animation*/ background: white; } .ch:first-child {padding-left: 2px;} .ch:last-child {padding-right: 2px;} /*active input label*/ .focussed { /*when any input is already focussed clicking on it(label) again won't do anything*/ pointer-events: none; }
//breakdown the labels into single character spans $(".flp label").each(function(){ var sop = '<span class="ch">'; //span opening var scl = '</span>'; //span closing //split the label into single letters and inject span tags around them $(this).html(sop + $(this).html().split("").join(scl+sop) + scl); //to prevent space-only spans from collapsing $(".ch:contains(' ')").html(" "); }) var d; //animation time $(".flp input").focus(function(){ //calculate movement for .ch = half of input height var tm = $(this).outerHeight()/2 *-1 + "px"; //label = next sibling of input //to prevent multiple animation trigger by mistake we will use .stop() before animating any character and clear any animation queued by .delay() $(this).next().addClass("focussed").children().stop(true).each(function(i){ d = i*50;//delay $(this).delay(d).animate({top: tm}, 200, 'easeOutBack'); }) }) $(".flp input").blur(function(){ //animate the label down if content of the input is empty if($(this).val() == "") { $(this).next().removeClass("focussed").children().stop(true).each(function(i){ d = i*50; $(this).delay(d).animate({top: 0}, 500, 'easeInOutBack'); }) } })
Expand for more options Login