Super Animated AJAX Login using jquery

Login into an account without page refresh has become very common in almost all websites. Today I will share you same concept script with you. Besides Log In functionality, I added a nice animation. When we click on click here to Log IN button and nice animated popup will appear and you can log in there. I also used custom HTML5 Validations(click here for more).


Demo Download

index.html

<!DOCTYPE html>  
<html>

<head>  
</head>

<body>  
    <div class="container">
        <div class="header">
            <div class="logo">
                <a href="http:/www.techumber.com">
                    <h1>Techumber<h1> 
                </a> 
            </div> 
            <div id="login-box"> 
                <button id="loginitBtn">+Click Here to Log in</button> 
            </div> 
            <p>Use Test credentials User:"user" Password:"pass"</p> 
        </div> 
    </div> 
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>  
<script type="text/javascript" src="process.js"></script>  
</body>  
</html>  

Process.js

$(function() {
    var o = {
        popupDiv: 'loginDiv'
    }
    var SuperLogin = function() {
        $('#' + o.popupDiv + 'Form').html('<img src="loader.gif style="text-align:center;" />');
        this.login = function(dataString) {
            $.ajax({
                type: "POST",
                url: "login.php",
                data: dataString,
                success: function(response) {
                    $('#' + o.popupDiv + 'Form').html(response);
                }
            });
            return false;
        };
        //call mbox 
        this.PopBox = function(e, $this) {
            var l = $($this).offset().left;
            var t = $($this).offset().top;
            $('body').append('<div id="mask" />');
            $('#mask').css({
                "position": "fixed",
                "left": "0",
                "top": "0",
                "background-color": "#000",
                "opacity": "0.5 !important",
                "display": "none"
            });
            $('body').append('<div id="' + o.popupDiv + '" />');
            $('#' + o.popupDiv).css({
                "position": "absolute",
                "border": "5px solid rgba(51, 51, 51,1.2)",
                "width": "300px",
                "z-index": "999",
                "border-radius": "5px",
                "padding": "20px",
                "background-color": "#fff",
                "left": l,
                "top": t,
                "opacity": "0"
            });
            $('#' + o.popupDiv).append('<div class="close" />');
            $('#' + o.popupDiv + ' .close').css({
                "background": "url(http://labs.techumber.com/LABS/js/FbSubscribe/x.png) no-repeat",
                "width": "25px",
                "height": "29px",
                "display": "inline",
                "z-index": "3200",
                "position": "absolute",
                "top": "-15px",
                "right": "-16px",
                "cursor": "pointer"
            });
            $('#' + o.popupDiv).append('<form id="' + o.popupDiv + 'Form" method="post" action="login.php">' +
                'User: <input type="text" name="user" id="user" required="required" />' +
                'Password: <input type="password" name="pass" id="pass" required="required"/>' +
                '<input type="submit" value="Log in" id="Loginsbt">' +
                '</form>');
            //Get the screen height and width 
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
            //Set heigth and width to mask to fill up the whole screen 
            $('#mask').css({
                'width': maskWidth,
                'height': maskHeight
            });
            //transition effect 
            $('#mask').fadeIn(1000);
            $('#mask').fadeTo("slow", 0.5);

            var wid = "600px";
            //Simple Zoom animation 
            $($this).css({
                'position': 'fixed',
                'height': '60px',
                'width': 300,
                'top': t,
                'left': l
            });
            $('#' + o.popupDiv).animate({
                'width': wid,
                'opacity': '1',
                'left': l - 150,
                'top': '100px'
            }, 1000);
            $($this).animate({
                'position': 'fixed',
                'width': wid,
                'left': l - 150,
                'top': '100px'
            }, 1000);
        };
    };

    //Events and Excuting Plugin 
    //***************************// 
    var sl = new SuperLogin();
    //will triger on crop button click 
    $("body").on("submit", '#' + o.popupDiv + 'Form', function(e) {
        //Cancel the link behavior 
        sl.login($(this).serialize());
        e.preventDefault();
    });
    $('#loginitBtn').click(function(e) {
        sl.PopBox(e, $(this));
    });
    $("body").on("click", "#" + o.popupDiv + " .close", function(e) {
        //Cancel the link behavior 
        e.preventDefault();
        $('#mask').remove();
        $("#" + o.popupDiv).remove();
        $('#loginitBtn').css({
            'position': 'relative',
            'height': '60px',
            'width': '300px',
            'top': '0',
            'left': '0'
        });
    });
    $("body").on("click", "#mask", function(e) {
        //Cancel the link behavior 
        e.preventDefault();
        $('#mask').remove();
        $("#" + o.popupDiv).remove();
        $('#loginitBtn').css({
            'position': 'relative',
            'height': '60px',
            'width': '300px',
            'top': '0',
            'left': '0'
        });
    });
});

login.php

<?php  
if ($_POST)  
{
    extract($_POST);

    // Retrieving username and password form DB

    if ($user == "user" && $pass = "pass") echo "<h2 style='color:green'>Success!</h2>";
    else echo "<h2 style='color:red'>Please Enter Correct credentials!</h2>";
}

CSS

body {  
    font: 16px/24px "Myriad Pro", Georgia, san-serif;
}
.container {
    width: 940px;
    margin: 0 auto;
}
a {  
    text-decoration: none;
}
.logo {
    float: left;
}
.header {
    border: 1px solid #DDD;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
    margin-bottom: 20px;
    padding: 9px;
    width: 900px;
    margin: 0 auto;
    height: 100px;
}
input,  
button {  
    padding: 5px 20px;
    background: #333;
    color: #fff;
    border: 0;
    border-radius: 4px;
    outline: none;
}
h1 {  
    color: #0089ca;
}
#login-box {
    width: 300px;
    height: 60px;
    text-align: center;
    margin: 0 auto;
}
#login-box button {
    height: 100%;
    width: 100%;
}
::-webkit-validation-bubble-message {
    color: #eee;
    background: #000;
    border: 1px solid #a90000;
}
::-webkit-validation-bubble-arrow {
    background: #000;
    border: 1px solid #a90000;
}

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.