JQuery and CSS3 Animated Login and Signup Form

amazing animated and stylish login / register jquery form which is simple to use.

DEMO

DOWNLOAD

HTML

01	<img id="login" src="result.png" alt="" />

02	<img id="submit" src="submit.png" alt="" />

03

04	<div id="Login_form" class="loginform">

05	<form action="#" method="post">

06

07

<div>

08

09	<div class="form-item">

10

11	<label for="edit-name">Username:</label>

12	<input id="edit-name" class="form-text required" maxlength="60" name="name" size="15" type="text" /></div>

13

14

15	<div class="form-item">

16

17	<label for="edit-pass">Password:</label>

18	<input id="edit-pass" class="form-text required" maxlength="60" name="pass" size="15" type="password" /></div>

19

</div>

20

21	</form></div>

22

23

24	<div id="SignupForm" class="loginform">

25	<form action="#" method="post">

26

27

<div>

28

29	<div class="form-item">

30

31	<label for="edit-name">Email:</label>

32	<input id="edit-name" class="form-text required" maxlength="60" name="name" size="15" type="text" /></div>

33

34

35	<div class="form-item">

36

37	<label for="edit-name">Username:</label>

38	<input id="edit-name" class="form-text required" maxlength="60" name="name" size="15" type="text" /></div>

39

40

41	<div class="form-item">

42

43	<label for="edit-pass">Password:</label>

44	<input id="edit-pass" class="form-text required" maxlength="60" name="pass" size="15" type="password" /></div>

45

</div>

46

47	</form></div>

48

49

50	<div id="nav-bar">

51

52	<div class="module-bg">

53	<a id="Log-in" class="TopButtons" href="#">Login</a>

54	<a id="signUp" class="TopButtons" href="#">SignUp</a></div>

55

</div>

JQuery Code

$(document).ready(function() {
 
 $('#nav-bar').fadeIn();
 
 $('#Log-in').click(function() {
 
  $('#Log-in').css('background-color', '#006699');
  $('#signUp').css('background-color', '#000000');
  $('#submit').hide().css({'left' : '0px'});
  $('#SignupForm').hide().css({'top' : '0px'});
 
  $('#login').show().animate({
 
   left   : '52%',
 
  },400,function(){
 
   $('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });
 
  });
  ///
  $('#Login_form').show().animate({
 
   top   : '60px',
 
  },700,function(){
 
   //$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
  });
 });
 
 $('#signUp').click(function() {
 
  $('#signUp').css('background-color', '#006699');
  $('#Log-in').css('background-color', '#000000');
  $('#login').hide().css({'left' : '0px'});
  $('#Login_form').hide().css({'top' : '0px'});
 
  $('#submit').show().animate({
 
   left   : '52%',
 
  },400,function(){
 
   $('#submit').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });
 
  });
  ///
  $('#SignupForm').show().animate({
 
   top   : '60px',
 
  },700,function(){
 
   //$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
  });
 });
 
});