✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Login Form With Shake Animation Effect Using jQuery And CSS3

Last Updated : Jul 1, 2023

IN - jQuery CSS3 HTML | Written & Updated By - Anjali

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.

Login Form With Shake Animation Effect Using jQuery And CSS3

CHECK OUT THIS TUTORIAL LIVE 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.

I hope this tutorial on animated login page using jquery and css helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →