Login form design in jquery with cool animation, simple jquery login form

Login form design in jquery with cool animation

Login form Design in JQquery with cool animation, In this tutorial we will code the Login Form that you can find animate from top, made by nitin rana. To create it we will use CSS3 and jQuery.

  Topic: CSS3, jquery 
  Difficulty: Intermediate / Advanced 
  Estimated completion time: 30 min.

 

Step 1 – HTML Markup

Let’s start creating the HTML markup. Create a form with inputs (for Email, password and submit) and wrap the checkbox input and label in a tag, we will use the tag to style the checkbox. To finish the form and the title with a div tag and give it the id “login”.

<div id="login_nav">
<a href="#">Login</a></div>
</div>
<div id="login">
<form>
Email: < input  name="email" placeholder="enter your email"  type="text" />
Password:<input  name="password" placeholder="enter your password" type="password" />

<input name="button" type="button" value="Login" />
     
<p>don't have an account, click to <a href="#" >Signup</a></p>
</form>
</div>
<div id="login_cover"></div> // for background to transparent the homepage

 

Step 2 – CSS Styles

body, html{margin:0;}
 
#login_nav{
    width:100px;
    height:40px;
    background:#ff3b4e;
    position:fixed;
    right:300px;
    top:-5px;
    z-index:99999;
    text-decoration:none;
    color:#eae7e4;
    font-family:Domine;
    font-size:15px;/* border-radius:5px;*/}
 
#login_nav a {
    text-decoration:none;
    color:#eae7e4;
    font-family:Domine;
    font-size:15px;}
 
#login{
    width:300px;
    height:160px;
    background:#ff3b4e;
    top:-200px;/*top:35%;*/
    left:40%; position:absolute;
    z-index:999999;
    display:block;
    border:2px solid #FFF;
    border-radius:4px; }
 
#login_cover{
    width:100%;
    height:100%;
    opacity:0.7;
    position:fixed;
    z-index:999998;
    background:#000;
    display:none;}

Step 3 – jquery code

 required jquery files

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/phpwcms/source/browse/trunk/template/lib/jquery/plugin/jquery.easing.min.js"></script>

function

$(document).ready(function(){
      $('#login_nav a').click(function(){
      $('#login_cover').fadeIn(500);
      $('#login').animate({top:'35%'},{duration:1500,easing:'easeOutElastic'
      });
 });

       $('#login_cover').click(function(){
       $('#login_cover').fadeOut(500);
       $('#login').animate({top:'-200px'},200);
       });
});

for source file click the below link to download....
download source file