LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Login

CSS

/*importing Oswald Font*/
@import url("https://fonts.googleapis.com/css?family=Oswald");

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

body {
	padding-top: 100px;
  /* Replace below with any background or remove*/
	background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-2.jpg);
	font-family: 'Oswald', sans-serif;
}
main {
	width: 600px; 
   margin: 0 auto; 
   padding-bottom: 10px;
	background: white; 
   overflow: hidden;
   border: 1px solid #222;
  
}
h1 {
	font-size: 24px; 
  font-weight: normal;
	background: #444; 
   color: #ccc;
	text-align: center; 
	padding: 20px 0; 
   margin-bottom: 40px;
}


/*Styles for moving table to the top*/
.top {padding: 0 50px;}

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

.top input, .bottom label {
	width: 100%; 
   display: block;
   font-size: 16px; 
   line-height: 24px;
	height: 46px;
	border: 1px solid #999;
}
.top input {
  padding: 10px; 
  outline: none; 
}
.top label {
	position: absolute; 
   left: 0; 
   top: 0;
	padding: 10px 8px;
	border-color: transparent; 
   color: #666;
	cursor: text;
}
/*End Move Label to the Top*/

/*Move label to the left*/
.left {
  padding: 0 50px;

}

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

.left input, .left label {
  position: relative;
  margin-left: 50px;
	width: 400px; 
   display: block;
   font-size: 16px; 
   line-height: 24px;
	height: 46px;
	border: 1px solid #999;
}
.left input {
  padding: 10px; 
  outline: none; 
}
.left label {
	position: absolute; 
   left: 0; 
   top: 0;
	padding: 10px 8px;
	border-color: transparent; 
   color: #666;
	cursor: text;
}
/*End Move Label to the Left*/


/*Move Label to the Bottom*/
.bottom {padding: 0 50px;}

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

.bottom input, .bottom label {
	width: 100%; 
   display: block;
   font-size: 16px; 
   line-height: 24px;
	height: 46px;
	border: 1px solid #999;
}
.bottom input {
  padding: 10px; 
  outline: none; 
}
.bottom label {
	position: absolute; 
   left: 0; 
   top: 0;
	padding: 10px 8px;
	border-color: transparent; 
   color: #666;
	cursor: text;
}
/*End Move Label to the Bottom*/

/*End Move Label to the Right*/
.right {padding: 0 50px;}

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

.right input, .right label {
	width: 100%; 
   display: block;
   font-size: 16px; 
   line-height: 24px;
	height: 46px;
	border: 1px solid #999;
   
}
.right input {
  padding: 10px; 
  outline: none; 
}
.right label {
	position: absolute; 
   left: 0; 
   top: 0;
	padding: 10px 8px;
	border-color: transparent; 
   color: #666;
	cursor: text;
}
/*End Move Label to the Right*/


/*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;
}

.btn-submit {
  position: relative;
  background-color: #666;
  color: #ccc;
  font-family: 'Oswald', sans-serif;
  width: 100%;
  height: 40px;
  font-size: 24px;
  border: 0px;
}
JS
//breakdown the labels into individual characters for animation
$("label").each(function(){
	var sop = '';
	var scl = ''; 
	$(this).html(sop + $(this).html().split("").join(scl+sop) + scl);
	$(".ch:contains(' ')").html(" ");
})

//Variable for Time Delay,  Set below
var d;

$(".top 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}, 100, 'easeInBounce');
	})
})
$(".top 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}, 100, 'easeInBounce');
		})
	}
})

var d;
$(".left input").focus(function(){
	//calculate movement for .ch = half of input height
	var tm = $(".left label").width()/4 *-1 + "px";
   //var width = $(".left label").width()*1.2;
   //$(this).animate({left: width}, 100, 'easeInBounce');
	//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({left: tm}, 100, 'easeInBounce');
	})
})
$(".left 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({left: 0}, 100, 'easeInBounce');
         $(".left input").animate({left: 0}, 100, 'easeInBounce');

		})
	}
})

var d;
$(".bottom 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({bottom: tm}, 100, 'easeInBounce');
	})
})
$(".bottom 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({bottom: 0}, 100, 'easeInBounce');
		})
	}
})

var d;
$(".right input").focus(function(){
	//calculate movement for .ch = half of input height
	var tm = (($(this).width() *-1) + 8) + "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({right: tm}, 100, 'easeInBounce');
    $(".right input").css("width","90%");
	})
})
$(".right 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({right: 0}, 100, 'easeInBounce');
        $(".right input").css("width","100%");

		})
	}
})
Host Instantly Drag and Drop Website Builder

 

Description

Login Form with 4 different placeholder settings allowing you to keep your placeholders either to the left, right, top, or bottom of your input field for user friendly input!
Term
Wed, 11/29/2017 - 11:24

Related Codes

Pen ID
Pen ID
Pen ID