Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created February 16, 2020 22:45
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 CodeMyUI/70ce3d0939ebc115e8bfb887eb180d4f to your computer and use it in GitHub Desktop.
Save CodeMyUI/70ce3d0939ebc115e8bfb887eb180d4f to your computer and use it in GitHub Desktop.
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