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

1 comments:

nitin rana said...

http://bestcreativedesigns.info/wp-content/uploads/2013/05/Beautiful-creative-business-card-designs-tutorart-graphic-design.jpg

Post a Comment