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

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/04/Animated-Login-Form-using-Jquery-CSS3.pnghttp://w3lessons.info/wp-content/uploads/2013/04/Animated-Login-Form-using-Jquery-CSS3-150x150.pngKarthikeyan KCSS3FreebiesjqueryCSS3,freebies,Jquery,Login form
Today I am going to share a simple animated login form which you can easily integrate in your web projects.List of Animations you can use in this login formflash bounce shake tada swing wobble wiggle pulseFLIPPERS (WEBKIT, FIREFOX & IE10 ONLY)flip flipInX flipOutX flipInY flipOutYFADING ENTRANCESfadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBigFADING EXITSfadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBigBOUNCING ENTRANCESbounceIn bounceInDown bounceInUp bounceInLeft bounceInRightBOUNCING EXITSbounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRightROTATING ENTRANCESrotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRightROTATING EXITSrotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRightLIGHTSPEEDlightSpeedIn lightSpeedOutLIGHTSPEEDhinge rollIn rollOutJquery Code for AnimationHTML CodePlease don’t forget to share and...