HTML
<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
CSS
/*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;
}
JAVASCRIPT
//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');
})
}
})
2 Responses