Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Animated Login and SignUp Form With Flip Animation using CSS3 and jQuery.

Friday, Apr 7, 2017

Tags:- jQuery CSS3


In this tutorial we will create a Animated Login and SignUp Form with Flip Animation using CSS3 and jQuery. Whenver the user clicks on Login and Signup Form Button the form appears with a Flip Animation.You may also like login form with shake animation effect using jQuery.


See Demo
Flip Animation


To create a Flip Animated Login and Signup Form it takes only two steps:-

  1. Make a HTML file and define markup and script for Flip Animated Login and Signup Form
  2. Make a CSS file and define styling for Flip Animated Login and Signup Form


Step 1.Make a HTML file and define markup and script for Flip Animated Login and Signup Form

We make a HTML file and save it with a name animation.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="animation_style.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">

    function login_flip()
    {
      $("#loginform").css({"-webkit-transition":"-webkit-transform 0.9s","transition":" transform 0.9s"});
      $("#loginform").css({"-moz-transform":"scaleX(1)","-o-transform":"scaleX(1)","-webkit-transform":"scaleX(1)","transform":"scaleX(1)"});
      $("#container").css("-webkit-transform","scaleX(1)");
      document.getElementById("container").innerHTML="<p>User Id</p><input type='text'><p>Password</p><input type='password'><br><input type='submit' value='Login'><input type='button' value='Click For SignUp!' onclick='signup_flip();'>";
    }

    function signup_flip()
    {
      $("#loginform").css({"-webkit-transition":"-webkit-transform 0.9s","transition":" transform 0.9s"});
      $("#loginform").css({"-moz-transform":"scaleX(-1)","-o-transform":"scaleX(-1)","-webkit-transform":"scaleX(-1)","transform":"scaleX(-1)"});
      $("#container").css("-webkit-transform","scaleX(-1)");
      document.getElementById("container").innerHTML="<p>User Name</p><input type='text'><p>Email Id</p><input type='text'><p>Password</p><input type='password'><br><input type='submit' value='SignUp'><input type='button' value='Click For Login!' onclick='login_flip();'>";
    }
	
  </script>
</head>

<body>
   <h1>Flip Animated Login and SignUp Form Using CSS3 and jQuery</h1>
   <div id="wrapper">
     <form id="loginform">
       <div id="container">
         <p>User Id</p>
         <input type="text">
         <p<Password</p>
         <input type="password">
         <br>
         <input type="submit" value="Login">
         <input type="button" value="Click For SignUp!" onclick="signup_flip();">		
       </div>
     </form>
   </div>
 </body>
</html>

In this step we make two functions login_flip and signup_flip.By default after page loading login form appears and below that there is a button for Signup from when the user clicks on that button signup form appears with Flip Animation and login form disappears and same as there is also a button on signup form when the user clicks on that button login form appears. We use transform property of CSS3 for more information of CSS3 Transform click here CSS3 Transform Property.



Step 2.Make a CSS file and define styling for Flip Animated Login and Signup Form

We make a CSS file and save it with name animation_style.css.

body
{
  background-color:#2E9AFE;
  font-family:helvetica;
}
#wrapper
{
  width:250px;
  height:370px;
  margin-left:370px;
  margin-top:100px;
  text-align: center;
}
form
{
  background-color:#0B3861;
  width:100%;
  height:100%;
  padding:20px;
  box-sizing:border-box;
  margin-top:5px;
}
p
{
  margin:0px;
  padding:0px;
  color:white;
  font-size:20px;
  margin-top:10px;
}
input[type="text"],input[type="password"]
{
  margin-top:5px;
  width:200px;
  height:40px;
  border:none;
  border-radius:3px;
}
input[type="submit"]
{
  margin-top:20px;
  width:200px;
  height:40px;
  background:none;
  border:none;
  background-color:#0431B4;
  color:white;
  font-size:20px;
  border-radius:3px;
}
input[type="button"]
{
  margin-top:20px;
  background:none;
  border:none;
  color:silver;
  font-size:17px;
  text-decoration:underline;
}

Thats all, this is how to create a Flip Animated Login and Signup Form using jQuery and CSS3.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH