Experimenting with hidden login forms with animated reveals. This is the first of a few hopefully.
Created
February 16, 2020 22:45
-
-
Save CodeMyUI/70ce3d0939ebc115e8bfb887eb180d4f to your computer and use it in GitHub Desktop.
Animated Login Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.preload.login--container | |
.login--form | |
.login--username-container | |
%label Username | |
%input(type="text" placeholder="Username" autofocus) | |
.login--password-container | |
%label Password | |
%input(type="password" placeholder="Password") | |
%button.js-toggle-login.login--login-submit Login | |
.login--toggle-container | |
%small Hey you, | |
.js-toggle-login Login | |
%small already | |
%footer | |
%a(href="https://twitter.com/code_dependant" class="twitter-follow-button" data-show-count="false") | |
Follow @code_dependant | |
%script !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ -> | |
$(".login--container").removeClass("preload") | |
@timer = window.setTimeout => | |
$(".login--container").toggleClass("login--active") | |
, 2000 | |
$(".js-toggle-login").click => | |
window.clearTimeout(@timer) | |
$(".login--container").toggleClass("login--active") | |
$(".login--username-container input").focus() | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import compass | |
$background-color: #F15A5C | |
$easing-function: cubic-bezier(.06,.63,0,1) | |
$animation-duration: 1s | |
* | |
margin: 0 | |
padding: 0 | |
box-sizing: border-box | |
html, body | |
height: 100% | |
background-color: $background-color | |
font-family: 'Roboto Slab', serif | |
color: white | |
// see https://css-tricks.com/transitions-only-after-page-load/ | |
.preload * | |
transition: none !important | |
label | |
display: block | |
font-weight: bold | |
font-size: small | |
text-transform: uppercase | |
font-size: 0.7em | |
margin-bottom: 0.35em | |
input[type="text"], input[type="password"] | |
width: 100% | |
border: none | |
padding: 0.5em | |
border-radius: 2px | |
margin-bottom: 0.5em | |
color: #333 | |
&:focus | |
outline: none | |
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, .3) | |
button | |
padding-left: 1.5em | |
padding-right: 1.5em | |
padding-bottom: 0.5em | |
padding-top: 0.5em | |
border: none | |
border-radius: 2px | |
background-color: #7E5AF1 | |
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25) | |
color: white | |
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45) | |
small | |
font-size: 1em | |
.login--login-submit | |
float: right | |
.login--container | |
width: 600px | |
background-color: $background-color | |
margin: 0 auto | |
position: relative | |
top: 25% | |
.login--toggle-container | |
position: absolute | |
background-color: $background-color | |
right: 0 | |
line-height: 2.5em | |
width: 50% | |
height: 120px | |
text-align: right | |
cursor: pointer | |
transform: perspective(1000px) translateZ(1px) | |
transform-origin: 0% 0% | |
transition: all $animation-duration $easing-function | |
backface-visibility: hidden | |
//border: 1px solid black | |
.js-toggle-login | |
font-size: 4em | |
text-decoration: underline | |
.login--active & | |
transform: perspective(1000px) rotateY(180deg) | |
background-color: darken($background-color, 25%) | |
.login--username-container, .login--password-container | |
float: left | |
background-color: $background-color | |
width: 50% | |
height: 120px | |
padding: .5em | |
.login--username-container | |
transform-origin: 100% 0% | |
transform: perspective(1000px) rotateY(180deg) | |
transition: all $animation-duration $easing-function | |
background-color: darken($background-color, 25%) | |
backface-visibility: hidden | |
.login--active & | |
transform: perspective(1000px) rotateY(0deg) | |
background-color: $background-color | |
footer | |
position: absolute | |
bottom: 12px | |
left: 20px | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment