Today I am going to share a simple animated login form which you can easily integrate in your web projects.

Animated Login Form using Jquery & CSS3
Animated Login Form using Jquery & CSS3

List of Animations you can use in this login form

  • flash
  • bounce
  • shake
  • tada
  • swing
  • wobble
  • wiggle
  • pulse

FLIPPERS (WEBKIT, FIREFOX & IE10 ONLY)

  • flip
  • flipInX
  • flipOutX
  • flipInY
  • flipOutY

FADING ENTRANCES

  • fadeIn
  • fadeInUp
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig

FADING EXITS

  • fadeOut
  • fadeOutUp
  • fadeOutDown
  • fadeOutLeft
  • fadeOutRight
  • fadeOutUpBig
  • fadeOutDownBig
  • fadeOutLeftBig
  • fadeOutRightBig

BOUNCING ENTRANCES

  • bounceIn
  • bounceInDown
  • bounceInUp
  • bounceInLeft
  • bounceInRight

BOUNCING EXITS

  • bounceOut
  • bounceOutDown
  • bounceOutUp
  • bounceOutLeft
  • bounceOutRight

ROTATING ENTRANCES

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

ROTATING EXITS

  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

LIGHTSPEED

  • lightSpeedIn
  • lightSpeedOut

LIGHTSPEED

  • hinge
  • rollIn
  • rollOut

Jquery Code for Animation

jQuery(document).ready(function(){
	var anievent = (jQuery.browser.webkit)? 'webkitAnimationEnd' : 'animationend';
	jQuery('.loginwrap').bind(anievent,function(){
		jQuery(this).removeClass('animate2 bounceInDown');
	});

	jQuery('#username,#password').focus(function(){
		if(jQuery(this).hasClass('error')) jQuery(this).removeClass('error');
	});

	jQuery('#loginform button').click(function(){
		if(!jQuery.browser.msie) {
			if(jQuery('#username').val() == '' || jQuery('#password').val() == '') {
				if(jQuery('#username').val() == '') jQuery('#username').addClass('error'); else jQuery('#username').removeClass('error');
				if(jQuery('#password').val() == '') jQuery('#password').addClass('error'); else jQuery('#password').removeClass('error');
				jQuery('.loginwrap').addClass('animate0 wobble').bind(anievent,function(){
					jQuery(this).removeClass('animate0 wobble');
				});
			} else {
				jQuery('.loginwrapper').addClass('animate0 fadeOutUp').bind(anievent,function(){
					jQuery('#loginform').submit();
				});
			}
			return false;
		}
	});
});

HTML Code

<div class="loginwrapper">
	<div class="loginwrap zindex100 animate2 bounceInDown">
	<h1 class="logintitle"><span class="iconfa-lock"><img src="lock.png" /></span> Sign In <span class="subtitle">Hello! Sign in to get you started!</span></h1>
        <div class="loginwrapperinner">
            <form id="loginform" action="" method="post">
                <p class="animate4 bounceIn"><input type="text" id="username" name="username" value="Username" placeholder="Username" /></p>
                <p class="animate5 flip"><input type="password" id="password" name="password" placeholder="Password" value="password" /></p>
                <p class="animate6 wobble"><button class="btn btn-default btn-block">Submit</button></p>
            </form>
        </div>
    </div>
    <div class="loginshadow animate3 fadeInUp"></div>
</div>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Live Demo & Download

Related Posts