Shantanu Gautam

An attempt to recreate Tumblr Login form with css3 keyframe Animation.

Recently I stumbled across Tumblr login page. I really like the subtle use of transitions in the login panel.I tried to recreate the same using excellent sets of prebuilt animations by  Dan Eden.

DEMO

I employed basic jQuery Function toggleClass(),addClass to add classes based on button click

[sourcecode language=”js”]
$(document).ready(function(){
$(“#login”).click(function(){
if ($(“nav a”).html()===’LOGIN’) {
$(“#content”).removeClass(“fadeInRightBig”);
$(“#logo”).addClass(“logo_repos”);
$(“#form_container”).removeClass(“fadeOutLeftBig”);
$(“#content”).toggleClass(“fadeOutRightBig”);
$(“#form_container”).toggleClass(“fadeInLeftBig”);
$(“nav a”).html(“CANCEL”);
} else {
$(“#logo”).removeClass(“logo_repos”);
$(“#content”).removeClass(“fadeOutRightBig”);
$(“#form_container”).removeClass(“fadeInLeftBig”);
$(“#content”).addClass(“fadeInRightBig”);
$(“#form_container”).addClass(“fadeOutLeftBig”);
$(“nav a”).html(“LOGIN”);
}
});
});
[/sourcecode]

I am sure there must be a way to simplify the code, but haven’t explored it further.

Original Article