Shaking Effect [Wordpress]

Hi readers,

Many of you might have seen the WordPress shaking effect on the login page of wordpress sites!

Well today we will talk about how to code that by yourselves from scratch!

Now the HTML markup and the CSS for the page will be:

<style>
#hi{position:absolute;
left:580px;
width:200px;
color:green;
display:inline;
}
<style>
<center><div id=”to”>Enter the password!</div>
<br />
<form id=”hi”>
<input type=”text” id=”pass1″ />
<input type=”submit” value=”Check” id=”check”/>
</form>
</center>
<h3>password=pass</h3>

The div with id=”hi” will be the one we will be shaking.

You can use any id or any simple element that you want to shake , we will just need to change it in our jQuery code!

Talking of which , here is the jQuery code:

$(document).ready(function(){
$(“#check”).click(function(e){ //when you click on the button
e.preventDefault(); //don’t redirect
var ch=$(“#pass1″).attr(“value”);
if( ch ==”pass” )
{
$(“#to”).html(“<strong>Right pass bro</strong>”);
$(“#to”).css(“color”,”green” );
} //end of if
else{
$(“#to”).html(“<strong>Wrong password!</strong>”);
$(“#to”).css(“color”,”red” );
$(“#hi”).animate({opacity: 0.25}, 170);
$(“#hi”).animate({left: ‘-=40′},170); //these 4 lines
$(“#hi”).animate({left: ‘+=80′},170); //are the main
$(“#hi”).animate({left: ‘-=80′},170); //code that cause
$(“#hi”).animate({left: ‘+=40′},170); //the shaking
$(“#hi”).animate({opacity: 1.00}, 170);
} //end of else
});
});

Now what this code is doing simply is that it is checking for a password and if that password is “pass” , a message will be displayed in green font whereas if the input is anything else the shaking effect will take place.

I used jQuery’s animate() function to accomplish this task but there are many more methods go and try them and do share them!

Although the code is quite simple but this is just to make the process clear and this code can be refined and the number of steps can be reduced by using the jQuery API properly!

I hope you all enjoyed this tutorial, see you all pretty soon and yeah Be Tech Friendly!