Shaking login form using jquery
Shaking login form using jquery
Shaking login form using Jquery (Similar To WordPress Admin Page Login Form Buzzing or Vibrating)
We have lot of script to vibrate a login form using jquery. This is just another one. It has some jquery, CSS and basic HTML. Thanks to Andreas Lagerkvist for his excellent vibrating function. First load the jquery module.
<script type="text/javascript" src="http://demo.mistonline.in/jquery-1.2.3.min.js"></script>
Then we have to add the main functions that helps in vibrating/buzzing the form.
$(document).ready(function() {
newQsNum = function(){
$("#login").vibrate();
}
$('#btnlogin').click(function() {
newQsNum();
});
});
/**
Andreas Lagerkvist (andreaslagerkvist.com)
* Released under a GNU General Public License v3 (http://creativecommons.org/licenses/by/3.0/)
*/
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();
});
};
Here i have set some values of my own according to my requirement. You are free to modify those values.
speed: 30, duration: 300, frequency: 10000, spread: 25
This function of jquery will intiate the vibration when the button is clicked. Here i am using a button to initiate the buzzing/vibration. You can use this function and load it at any point like when the user enters a wrong username / password or something based on those, it all depends on your skill of modifying it. If you need any help from my side please drop a comment.
$('#btnlogin').click(function() {
newQsNum();
});
This is followed by a simple styling code.
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;
}
Last but not the least our HTML code.
<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>
That’s it convert all the above code in to one single html page and you are done.
Shaking login form using jquery,
