Last updated on August 26th, 2022 at 07:54 am
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
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.
<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();
});
};</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.
admin