Animated Login and Sign Up. This Pen is base on the Dribbble shot made by Deepak Yadav that you can find here: https://goo.gl/XRALsw
A Pen by Hurick Krügner on CodePen.
Animated Login and Sign Up. This Pen is base on the Dribbble shot made by Deepak Yadav that you can find here: https://goo.gl/XRALsw
A Pen by Hurick Krügner on CodePen.
<!-- | |
This was created based on the Dribble shot by Deepak Yadav that you can find at https://goo.gl/XRALsw | |
I'm @hk95 on GitHub. Feel free to message me anytime. | |
--> | |
<section class="user"> | |
<div class="user_options-container"> | |
<div class="user_options-text"> | |
<div class="user_options-unregistered"> | |
<h2 class="user_unregistered-title">Don't have an account?</h2> | |
<p class="user_unregistered-text">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p> | |
<button class="user_unregistered-signup" id="signup-button">Sign up</button> | |
</div> | |
<div class="user_options-registered"> | |
<h2 class="user_registered-title">Have an account?</h2> | |
<p class="user_registered-text">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p> | |
<button class="user_registered-login" id="login-button">Login</button> | |
</div> | |
</div> | |
<div class="user_options-forms" id="user_options-forms"> | |
<div class="user_forms-login"> | |
<h2 class="forms_title">Login</h2> | |
<form class="forms_form"> | |
<fieldset class="forms_fieldset"> | |
<div class="forms_field"> | |
<input type="email" placeholder="Email" class="forms_field-input" required autofocus /> | |
</div> | |
<div class="forms_field"> | |
<input type="password" placeholder="Password" class="forms_field-input" required /> | |
</div> | |
</fieldset> | |
<div class="forms_buttons"> | |
<button type="button" class="forms_buttons-forgot">Forgot password?</button> | |
<input type="submit" value="Log In" class="forms_buttons-action"> | |
</div> | |
</form> | |
</div> | |
<div class="user_forms-signup"> | |
<h2 class="forms_title">Sign Up</h2> | |
<form class="forms_form"> | |
<fieldset class="forms_fieldset"> | |
<div class="forms_field"> | |
<input type="text" placeholder="Full Name" class="forms_field-input" required /> | |
</div> | |
<div class="forms_field"> | |
<input type="email" placeholder="Email" class="forms_field-input" required /> | |
</div> | |
<div class="forms_field"> | |
<input type="password" placeholder="Password" class="forms_field-input" required /> | |
</div> | |
</fieldset> | |
<div class="forms_buttons"> | |
<input type="submit" value="Sign up" class="forms_buttons-action"> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
</section> |
/** | |
* Variables | |
*/ | |
const signupButton = document.getElementById('signup-button'), | |
loginButton = document.getElementById('login-button'), | |
userForms = document.getElementById('user_options-forms') | |
/** | |
* Add event listener to the "Sign Up" button | |
*/ | |
signupButton.addEventListener('click', () => { | |
userForms.classList.remove('bounceRight') | |
userForms.classList.add('bounceLeft') | |
}, false) | |
/** | |
* Add event listener to the "Login" button | |
*/ | |
loginButton.addEventListener('click', () => { | |
userForms.classList.remove('bounceLeft') | |
userForms.classList.add('bounceRight') | |
}, false) |
/** | |
* General variables | |
*/ | |
$bdrds: 3px | |
$white: #fff | |
$black: #000 | |
$gray: #ccc | |
$salmon: #e8716d | |
$smoky-black: rgba(#222222, .85) | |
$ff: 'Montserrat', sans-serif | |
$ff-body: 12px | |
$ff-light: 300 | |
$ff-regular: 400 | |
$ff-medium: 500 | |
/** | |
* General configs | |
*/ | |
* | |
box-sizing: border-box | |
body | |
font-family: $ff | |
font-size: $ff-body | |
line-height: 1em | |
button | |
background-color: transparent | |
padding: 0 | |
border: 0 | |
outline: 0 | |
cursor: pointer | |
input | |
background-color: transparent | |
padding: 0 | |
border: 0 | |
outline: 0 | |
&[type="submit"] | |
cursor: pointer | |
&::placeholder | |
font-size: .85rem | |
font-family: $ff | |
font-weight: $ff-light | |
letter-spacing: .1rem | |
color: $gray | |
/** | |
* Bounce to the left side | |
*/ | |
@keyframes bounceLeft | |
0% | |
transform: translate3d(100%, -50%, 0) | |
50% | |
transform: translate3d(-30px, -50%, 0) | |
100% | |
transform: translate3d(0, -50%, 0) | |
/** | |
* Bounce to the left side | |
*/ | |
@keyframes bounceRight | |
0% | |
transform: translate3d(0, -50%, 0) | |
50% | |
transform: translate3d(calc(100% + 30px), -50%, 0) | |
100% | |
transform: translate3d(100%, -50%, 0) | |
/** | |
* Show Sign Up form | |
*/ | |
@keyframes showSignUp | |
100% | |
opacity: 1 | |
visibility: visible | |
transform: translate3d(0, 0, 0) | |
/** | |
* Page background | |
*/ | |
.user | |
display: flex | |
justify-content: center | |
align-items: center | |
width: 100% | |
height: 100vh | |
background: #ccc | |
background-size: cover | |
&_options-container | |
position: relative | |
width: 80% | |
&_options-text | |
display: flex | |
justify-content: space-between | |
width: 100% | |
background-color: $smoky-black | |
border-radius: $bdrds | |
/** | |
* Registered and Unregistered user box and text | |
*/ | |
.user_options-registered, | |
.user_options-unregistered | |
width: 50% | |
padding: 75px 45px | |
color: $white | |
font-weight: $ff-light | |
.user_registered-title, | |
.user_unregistered-title | |
margin-bottom: 15px | |
font-size: 1.66rem | |
line-height: 1em | |
.user_unregistered-text, | |
.user_registered-text | |
font-size: .83rem | |
line-height: 1.4em | |
.user_registered-login, | |
.user_unregistered-signup | |
margin-top: 30px | |
border: 1px solid $gray | |
border-radius: $bdrds | |
padding: 10px 30px | |
color: $white | |
text-transform: uppercase | |
line-height: 1em | |
letter-spacing: .2rem | |
transition: background-color .2s ease-in-out, color .2s ease-in-out | |
&:hover | |
color: $smoky-black | |
background-color: $gray | |
/** | |
* Login and signup forms | |
*/ | |
.user_options-forms | |
position: absolute | |
top: 50% | |
left: 30px | |
width: calc(50% - 30px) | |
min-height: 420px | |
background-color: $white | |
border-radius: $bdrds | |
box-shadow: 2px 0 15px rgba($black, .25) | |
overflow: hidden | |
transform: translate3d(100%, -50%, 0) | |
transition: transform .4s ease-in-out | |
.user_forms-login | |
transition: opacity .4s ease-in-out, visibility .4s ease-in-out | |
.forms | |
&_title | |
margin-bottom: 45px | |
font-size: 1.5rem | |
font-weight: $ff-medium | |
line-height: 1em | |
text-transform: uppercase | |
color: $salmon | |
letter-spacing: .1rem | |
&_field | |
&:not(:last-of-type) | |
margin-bottom: 20px | |
&_field-input | |
width: 100% | |
border-bottom: 1px solid $gray | |
padding: 6px 20px 6px 6px | |
font-family: $ff | |
font-size: 1rem | |
font-weight: $ff-light | |
color: darken($gray, 30%) | |
letter-spacing: .1rem | |
transition: border-color .2s ease-in-out | |
&:focus | |
border-color: darken($gray, 30%) | |
&_buttons | |
display: flex | |
justify-content: space-between | |
align-items: center | |
margin-top: 35px | |
&-forgot | |
font-family: $ff | |
letter-spacing: .1rem | |
color: $gray | |
text-decoration: underline | |
transition: color .2s ease-in-out | |
&:hover | |
color: darken($gray, 10%) | |
&-action | |
background-color: $salmon | |
border-radius: $bdrds | |
padding: 10px 35px | |
font-size: 1rem | |
font-family: $ff | |
font-weight: $ff-light | |
color: $white | |
text-transform: uppercase | |
letter-spacing: .1rem | |
transition: background-color .2s ease-in-out | |
&:hover | |
background-color: darken($salmon, 10%) | |
.user_forms-signup, | |
.user_forms-login | |
position: absolute | |
top: 70px | |
left: 40px | |
width: calc(100% - 80px) | |
opacity: 0 | |
visibility: hidden | |
transition: opacity .4s ease-in-out, visibility .4s ease-in-out, transform .5s ease-in-out | |
.user_forms-signup | |
transform: translate3d(120px, 0, 0) | |
.forms_buttons | |
justify-content: flex-end | |
.user_forms-login | |
transform: translate3d(0, 0, 0) | |
opacity: 1 | |
visibility: visible | |
/** | |
* Triggers | |
*/ | |
.user_options-forms | |
&.bounceLeft | |
animation: bounceLeft 1s forwards | |
.user_forms-signup | |
animation: showSignUp 1s forwards | |
.user_forms-login | |
opacity: 0 | |
visibility: hidden | |
transform: translate3d(-120px, 0, 0) | |
&.bounceRight | |
animation: bounceRight 1s forwards | |
/** | |
* Responsive 990px | |
*/ | |
@media screen and (max-width: 990px) | |
.user_options-forms | |
min-height: 350px | |
.forms_buttons | |
flex-direction: column | |
.user_forms-login | |
.forms_buttons-action | |
margin-top: 30px | |
.user_forms-signup, | |
.user_forms-login | |
top: 40px | |
.user_options-registered, | |
.user_options-unregistered | |
padding: 50px 45px |