How to shake registration form on error

Question

I have a login page with HTML and CSS. It is fully functional and all that. However, if the login fails, I want the login form to tremble. How to make him shake. Now he does nothing.

Here is my HTML / CSS / JavaScript. If more code is required, please tell me.

HTML

<div class="input"> <c:if test="${not empty error}"> <div class="error">${error}</div> </c:if> <c:if test="${not empty msg}"> <div class="msg">${msg}</div> </c:if> <div class="email"> <input type="text" name="username" placeholder="[e-mail]"></input> </div> <div class="password"> <input type="password" name="password" placeholder="*********"></input> </div> </div> <input class="login_btn" type="submit" name="submit" value=""> 

CSS

 .container .login_component .login_wrap .login_wp .input input { width: 290px; height: 50px; padding-left: 20px; font-size: 15px; border: none; background: transparent; } .container .login_component .login_wrap .login_wp .input .email { height: 53px; margin-top: 20px; background: url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png"); background-repeat: no-repeat; background-position: center center; } .container .login_component .login_wrap .login_wp .input .password { height: 53px; margin-top: 20px; background: url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png"); background-repeat: no-repeat; background-position: center center; } .container .login_component .login_wrap .login_wp .login_btn { height: 55px; margin-top: 30px; background: url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/login_btn.png"); background-repeat: no-repeat; background-position: center center; border: none; width: 310px; } 

Javascript

 $('input[type=submit]').on('click', function(e){ e.preventDefault(); $('.input').addClass('ahashakeheartache'); }); $('.input').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e){ $('.input').delay(200).removeClass('ahashakeheartache'); }); 

Answer 1

If you use animate.css , you can create this effect. Here is a github project where you can download the source code. There are other effects that you can check.

Code for shaking from animate.css:

 .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } 

Js

 $(document).ready(function(){ $('.submit').click(function(e){ // Code to check login // If fail $('.input').addClass('animated shake'); }); }) 

Answer 2

Use simple animations in jQuery include jquery user interface

 <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> $(document).on('click', '#yoursubmitdiv', function(){ //code if login fails $( "#yourloginfield" ).effect( "shake" ); // this will shake your div }); 

Answer 3

I would recommend using simple Javascript here, keeping it simple but not too simple at the same time. Not only shake , but not 50 lines of code. Please ask, not something is unclear with the code; I tried to keep it as compact as possible.

 var box1Left1 = 100, box1Left2, keepShaking = true; var originalLeftPos = parseInt(document.getElementById("box1").style.left); setTimeout(stopShake, 1000); //Shake for how long function stopShake() { keepShaking = false; } setInterval(shake, 10); //Set shorter interval for faster shake function shake() { if ( keepShaking == true ) { if ( box1Left1 < originalLeftPos + 5 ) { // "+5" = The shake distance. Go right. box1Left1++; document.getElementById("box1").style.left = box1Left1 + "px"; box1Left2 = box1Left1; } if ( box1Left1 >= (originalLeftPos + 5) ) { // Go left. box1Left2--; document.getElementById("box1").style.left = box1Left2 + "px"; } if( box1Left2 == originalLeftPos ) { box1Left1 = box1Left2; } // Go Right Again } } 

 <div id="box1" style="position:absolute; top: 10px; left: 100px; width: 100px; height: 50px; background-color: #aa39fc;"> Incorrect Password </div>