How to create animated login form using Jquery

Last updated on August 26th, 2022 at 07:54 am

Click to rate this tutorial!

[Total: 5 Average: 4]

In this tutorial we are going to take a deeper look on creating a Shaking login form using jQuery (Similar To WordPress Admin Page Login Form Buzzing or Vibrating).

Create HTML Form
Add Style
Load jQuery
Add animation
Add button

Create HTML Form

The very first step is to create a simple HTML login form

<div id="login">
             
    <h3>Buzzing Login Form</h3>
    <form action="" method="post" id="loginform">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" />
         
        <label for="pwd">Password:</label>
        <input type="password" name="pwd" id="pwd" />
         
    </form>
             
</div>

Add CSS / Style

Let us add some style to the form so that it looks good

body {
        font-size: 100%;
        font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
        padding-top: 100px;
    }
    label { display: block; margin-top: 10px; }
    #login {
        width: 70%;
        margin: 0 auto;
        border: 5px solid #000;
        padding: 25px;
        background-color: #777;
        position: relative; left: 1px; top: -1px;
    }

Loading jQuery Library

Next step is to add the jQuery library for DOM operations within the head tags

<head><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head>

Add function to animate login form

Here we are adding the main function responsible for vibrating/buzzing the form.

&lt;script type="text/javascript">
$(document).ready(function() {
  newQsNum = function(){
 	$("#login").vibrate();
		}
	$('#btnlogin').click(function() {
	newQsNum();
	});
});
jQuery.fn.vibrate = function(conf) {
        var config = jQuery.extend({
                speed: 30,
                duration: 300,
                frequency: 10000,
                spread: 25
        }, conf);

        return this.each(function() {
                var t = jQuery(this);

                var vibrate = function() {
                        var topPos = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
                        var leftPos = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
                        var rotate = Math.floor(Math.random() * config.spread - (config.spread - 1) / 2); // cheers to [email protected] for the rotation-idea
                        t.css({position: 'relative', left: leftPos +'px', top: topPos +'px', WebkitTransform: 'rotate('+rotate+' deg)'});
                };

                var doVibration = function () {

						var vibrationInterval = setInterval(vibrate, config.speed);

                        var stopVibration = function() {
                                clearInterval(vibrationInterval);
                                t.css({position: 'static'});
                        };

                        setTimeout(stopVibration, config.duration);
                };

               // setInterval(doVibration, config.frequency);
				doVibration();
        });
};&lt;/script>

You don’t have to worry about going through the above function. Just modify these values within the function to animate the form accordingly

speed: 30,
duration: 300,
frequency: 10000,
spread: 25

As you can see from the code above we have defined a on click trigger for the button with id btnlogin, basically when user clicks this button it calls the function to eventually shake the form.

$(document).ready(function() {
  newQsNum = function(){
 	$("#login").vibrate();
		}
	$('#btnlogin').click(function() {
	newQsNum();
	});
});

Add HTML Button to the Form

Last but not the least we need to add this button code to the HTML to call the function we declared inside the script tag.

<button id="btnlogin">Test The Buzzing Now</button>

That’s it convert all the above code in to one single html page and you are done.

DEMO