Creating an animated login form

The login form is the main entry point to many of the websites and web applications—first impressions are everything. Using jQuery animations, we can create a login form that is animated when it is opened, closed, and there's an error, creating a quality user experience that is reinforced through the animations.

This recipe requires a web server that supports PHP. This sever can be hosted in the cloud or a simple local development server. Before starting with this recipe, ensure that you have this set up.

Getting ready

Create recipe-1.html, recipe-1.js, and recipe.css in the same directory as the latest version of the jQuery library. As we are creating a login form, we are also going to need a PHP script on which to post our login data. Create a PHP file named index.php inside the web root of a web server and add the following code:

$response = new stdClass;
$response->success = false;
$response->error = "Username and password must be provided";
if (isset...