Skip to content

Instantly share code, notes, and snippets.

@kgust

kgust/animation.html

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kgust/76be53633df8cfc67209 to your computer and use it in GitHub Desktop.
Save kgust/76be53633df8cfc67209 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animation.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function login_flip()
{
$("#loginform").css({"-webkit-transition":"-webkit-transform 0.9s","transition":" transform 0.9s"});
$("#loginform").css({"-moz-transform":"scaleX(1)","-o-transform":"scaleX(1)","-webkit-transform":"scaleX(1)","transform":"scaleX(1)"});
$("#container").css("-webkit-transform","scaleX(1)");
document.getElementById("container").innerHTML="<p>User Id</p><input type='text'><p>Password</p><input type='password'><br><input type='submit' value='Login'><input type='button' value='Click For SignUp!' onclick='signup_flip();'>";
}
function signup_flip()
{
$("#loginform").css({"-webkit-transition":"-webkit-transform 0.9s","transition":" transform 0.9s"});
$("#loginform").css({"-moz-transform":"scaleX(-1)","-o-transform":"scaleX(-1)","-webkit-transform":"scaleX(-1)","transform":"scaleX(-1)"});
$("#container").css("-webkit-transform","scaleX(-1)");
document.getElementById("container").innerHTML="<p>User Name</p><input type='text'><p>Email Id</p><input type='text'><p>Password</p><input type='password'><br><input type='submit' value='SignUp'><input type='button' value='Click For Login!' onclick='login_flip();'>";
}
</script>
</head>
<body>
<h1>Flip Animated Login and SignUp Form Using CSS3 and jQuery</h1>
<div id="wrapper">
<form id="loginform">
<div id="container">
<p>User Id</p>
<input type="text">
<p<Password</p>
<input type="password">
<br>
<input type="submit" value="Login">
<input type="button" value="Click For SignUp!" onclick="signup_flip();">
</div>
</form>
</div>
</body>
</html>
Raw
style.css
body
{
background-color:#2E9AFE;
font-family:helvetica;
}
#wrapper
{
width:250px;
height:370px;
margin-left:370px;
margin-top:100px;
text-align: center;
}
form
{
background-color:#0B3861;
width:100%;
height:100%;
padding:20px;
box-sizing:border-box;
margin-top:5px;
}
p
{
margin:0px;
padding:0px;
color:white;
font-size:20px;
margin-top:10px;
}
input[type="text"],input[type="password"]
{
margin-top:5px;
width:200px;
height:40px;
border:none;
border-radius:3px;
}
input[type="submit"]
{
margin-top:20px;
width:200px;
height:40px;
background:none;
border:none;
background-color:#0431B4;
color:white;
font-size:20px;
border-radius:3px;
}
input[type="button"]
{
margin-top:20px;
background:none;
border:none;
color:silver;
font-size:17px;
text-decoration:underline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment