Skip to content

Instantly share code, notes, and snippets.

@serhii-fisher

serhii-fisher/index.html

Created October 17, 2016 15:11
Show Gist options
  • Save serhii-fisher/073496c08b2a68f1684121b2b822c825 to your computer and use it in GitHub Desktop.
Save serhii-fisher/073496c08b2a68f1684121b2b822c825 to your computer and use it in GitHub Desktop.
Download ZIP
Login animation
Raw
index.html
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<div class="wrap_bg">
<div id="main" class="login_wrap singUpActive">
<div class="login_question_wrap">
<div class="question_singUp ">
<h2 class="title">Don't have an account?</h2>
<p>Lorem ipsum dolor sit ames
lorem ipsum dolor sit ames
lorem ipsum dolor sit ames
lorem ipsum dolor sit ames
</p>
<a href="javascript:void(0)" id="signUpBtn" class="btn btn_rounded">Sing up</a>
</div>
<div class="question_login ">
<h2 class="title">Have an account?</h2>
<p>Lorem ipsum dolor sit ames
lorem ipsum dolor sit ames
lorem ipsum dolor sit ames
lorem ipsum dolor sit ames
</p>
<a href="javascript:void(0)" id="loginBtn" class="btn btn_rounded">Log in</a>
</div>
<div class="action_singUp">
<form action="#">
<fieldset>
<legend class="title">Sing Up</legend>
<div class="input_block">
<div class="input_wrap">
<input type="text" id="sing_name" class="input" placeholder="Full Name">
<label for="sing_name" class="label_name"></label>
</div>
<div class="input_wrap">
<input type="text" id="sing_email" class="input" placeholder="Email">
<label for="sing_email" class="label_mail"></label>
</div>
<div class="input_wrap">
<input type="text" id="sing_pass" class="input" placeholder="Password">
<label for="sing_pass" class="label_pass"></label>
</div>
</div>
<input type="submit" value="Sing Up" class="btn btn_red">
</fieldset>
</form>
</div>
<div class="action_login">
<form action="#">
<fieldset>
<legend class="title">Log in</legend>
<div class="input_block">
<div class="input_wrap">
<input type="text" id="mail" class="input" placeholder="Email">
<label for="sing_pass" class="label_mail"></label>
</div>
<div class="input_wrap">
<input type="text" id="pass" class="input" placeholder="Password">
<label for="sing_pass" class="label_pass"></label>
</div>
</div>
<a href="#" class="forgotPass">Forgot password?</a>
<input type="submit" value="Login" class="btn btn_red">
</fieldset>
</form>
</div>
</div>
<div class="login_action_wrap ">
</div>
</div>
</div>
Raw
login-animation.markdown
Raw
script.js
var $wrap = $('#main');
var $signUpBtn = $wrap.find('#signUpBtn');
var $loginBtn = $wrap.find("#loginBtn");
$signUpBtn.on('click', function() {
$wrap.addClass('singUpActive');
$wrap.removeClass('loginActive');
});
$loginBtn.on('click', function() {
$wrap.addClass('loginActive');
$wrap.removeClass('singUpActive');
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.less
* {
box-sizing: border-box;
&:before,&:after {
box-sizing: border-box;
}
}
html,body {
height: 100%;
}
body {
overflow: hidden;
margin: 0;
font-family: 'Lato', sans-serif;
}
.wrap_bg {
position: relative;
height: 100%;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/55/57/d7/5557d7261d6a3acf7605f074f0308705.png');
background-size: cover;
background-position: 50%;
}
.btn {
display: inline-block;
min-width: 140px;
padding: 0 20px;
border-radius: 5px;
line-height: 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
color: #fff;
outline: 0;
border: 0;
&_rounded {
border: 1px solid #C3C3C3;
color: #C3C3C3;
transition: all .3s ease-in-out;
}
&_red {
background-color: #f78c7b;
line-height: 33px;
}
}
.label {
&_name, &_mail, &_pass {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
position: absolute;
right: 5px;
top: 10px;
transition: color .4s cubic-bezier(1,0,0,1);
}
}
&_name {
&:before {
content: "\f007";
}
}
&_mail {
&:before {
content: "\f0e0";
}
}
&_pass {
&:before {
content: "\f023";
}
}
}
.forgotPass {
text-decoration: none;
color: #C3C3C3;
}
.login {
&_wrap {
position: absolute;
top: 50%;
left: 50%;
width: 830px;
height: 350px;
border-radius: 3px;
background-color: rgba(0,0,0, .55);
color: #c1c4d6;
transform: translate(-50%, -50%);
}
&_action_wrap {
position: absolute;
top: -40px;
left: 50px;
height: 430px;
width: 430px;
background-color: #f7f7f6;
border-radius: 3px;
box-shadow: 0 0 10px 3px rgba(39, 37, 37, 0.45);
}
}
.question {
&_singUp, &_login {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 270px;
.title {
margin: 0;
line-height: 32px;
font-size: 28px;
}
p {
padding: 15px 0 20px 0;
font-size: 14px;
}
}
&_singUp {
left: 50px;
}
&_login {
right: 50px;
}
}
.action {
&_singUp, &_login {
position: absolute;
top: 30px;
width: 330px;
z-index: 3;
.btn {
float: right;
}
.title {
color: #f78c7b;
text-transform: uppercase;
font-size: 22px;
}
.input {
width: 100%;
padding-bottom: 5px;
margin-bottom: 10px;
border: 0;
border-bottom: 2px solid #c1c4d6;
background-color: transparent;
line-height: 32px;
font-size: 13px;
&:hover, &:focus, &:active {
outline: 0;
}
&_block {
margin: 35px 0;
}
}
}
&_singUp{
left: 100px;
}
&_login {
right: 100px;
}
}
.input_wrap {
position: relative;
}
// animation
.loginActive {
.login_action_wrap {
animation: .6s loginActive forwards;
}
.action_singUp, .question_login {
visibility: hidden;
}
}
.singUpActive {
.login_action_wrap {
animation: .6s singUpActive forwards;
}
.action_login, .question_singUp {
visibility: hidden;
}
}
.input {
+ label {
&:after {
content: '';
position: absolute;
bottom: 10px;
left: 0;
height: 2px;
width: 0;
background-color: #f78c7b;
transition: width .4s cubic-bezier(1,0,0,1);
}
}
&:focus {
+ label {
&:after {
width: 100%;
}
&:before {
color: #f78c7b;
}
}
}
}
@keyframes loginActive {
40% {
transform: translateX(320px);
}
65% {
transform: translateX(280px);
}
100% {
transform: translateX(300px);
}
}
@keyframes singUpActive {
0% {
transform: translateX(300px);
}
40% {
transform: translateX(-20px);
}
65% {
transform: translateX(20px);
}
100% {
transform: none;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment