Login Form With Shake Animation Effect Using jQuery And CSS3

Datetime:2016-08-23 03:05:22          Topic: jQuery  CSS3           Share

Tags:-jQuery CSS3 HTML

In this tutorial we will show you how to create a login form with shake animation effect using jQuery and CSS3. If user entered wrong details in login form then login form shake with animation.You may also like flip animated login and signup form .

See Demo

To Create Login Form With Shake Animation Effect It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a CSS file and define styling

Step 1.Make a HTML file and define markup and scripting

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

<html>
<head>
<link rel="stylesheet" type="text/css" href="login_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function check_login()
{
 var name=$("#user_name").val();
 var pass=$("#password").val();
 if(name=="talkerscode" && pass=="talkerscode")
 {
  alert("Successfully Logged In");
  $("#user_name").val("");
  $("#password").val("");
 }
 else
 {
  $("#login_form").removeClass('shake_effect');  
  setTimeout(function()
  {
   $("#login_form").addClass('shake_effect')
  },1);  
 }
}
</script>
</head>
<body>
<div id="wrapper">

<div id="login_form" class="no_effect">
 <p id="login_label">LOGIN FORM</p>
 <p>USERNAME</p>
 <input type="text" id="user_name">
 <p>PASSWORD</p>
 <input type="password" id="password">
 <p>UserName : talkerscode Password : talkerscode</p>
 <p><input type="button" value="LOGIN" onclick="check_login();"></p>
</div>

</div>
</body>
</html>

In this step we create a login form and attach onclick event to a button which calls check_login() function.In check_login() function we simply get user name and password values and check if its is correct or not if values are not correct then we simply change the class to 'shake_effect' and then our login form will shake.You may also like login form on popup box using jQuery .

Step 2.Make a CSS file and define styling

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

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#819FF7;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#login_form
{
 background-color:white;
 width:300px;
 margin-left:330px;
 box-shadow:0px 0px 10px 0px #2E64FE;
 padding:15px;
}
#login_form #login_label
{
 font-size:25px;
 font-weight:bold;
 color:#5882FA;
 margin:0px;
}
#login_form p
{
 margin:0px;
 margin-top:20px;
 color:#819FF7;
 font-size:17px;
 font-weight:bold;
}
#login_form input[type="text"],input[type="password"]
{
 margin-top:5px;
 width:250px;
 height:35px;
 padding-left:5px;
}
#login_form input[type="button"]
{
 background-color:#819FF7;
 border:none;
 border-bottom:7px solid #5882FA;
 width:250px;
 height:45px;
 border-radius:2px;
 color:white;
 font-weight:bold;
}
.shake_effect
{
 animation: shake 1s ;
}
@keyframes shake 
{
 10%, 90% 
 {
  transform: translate3d(-1px, 0, 0);
 }
  
 20%, 80% 
 {
  transform: translate3d(2px, 0, 0);
 }

 30%, 50%, 70% 
 {
  transform: translate3d(-4px, 0, 0);
 }

 40%, 60% 
 {
  transform: translate3d(4px, 0, 0);
 }
}

In this step we use CSS3 animation and keyframes to shake effect to our login form.You may also like jQuery form validation .

Thats all, this is how to create login form with shake animation effect using jQuery and CSS3.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.





About List