Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated Login Form

Animated Login Form

Experimenting with hidden login forms with animated reveals. This is the first of a few hopefully.

A Pen by Che on CodePen.

License.

.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');
$ ->
$(".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()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@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
<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
You can’t perform that action at this time.