Just trying to do some login animations. Buggy on Firefox, fine in Chrome. Still need to tidy up and Optimize
A Pen by Jamie Coulter on CodePen.
.brand | |
%a{:href => 'http://www.jamiecoulter.co.uk',:target => '_blank'} | |
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logo.png'} | |
.login | |
.login_title | |
%span Login to your account | |
.login_fields | |
.login_fields__user | |
.icon | |
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/user_icon_copy.png'} | |
%input{:type => 'text',:placeholder => 'Username'} | |
.validation | |
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png'} | |
.login_fields__password | |
.icon | |
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/lock_icon_copy.png'} | |
%input{:type => 'password',:placeholder => 'Password'} | |
.validation | |
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png'} | |
.login_fields__submit | |
%input{:type => 'submit',:value => 'Log In'} | |
.forgot | |
%a{:href => '#'} Forgotten password? | |
.success | |
%h2 Authentication Success | |
%p Welcome back | |
.disclaimer | |
%p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper laoreet placerat. Nullam semper auctor justo, rutrum posuere odio vulputate nec. | |
.authent | |
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/puff.svg'} | |
%p Authenticating... | |
.love | |
%p Made with <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/love_copy.png" /> by <a href='http://www.jamiecoulter.co.uk' target='_blank'> Jcoulterdesign </a> |
Just trying to do some login animations. Buggy on Firefox, fine in Chrome. Still need to tidy up and Optimize
A Pen by Jamie Coulter on CodePen.
$('input[type="submit"]').click(function(){ | |
$('.login').addClass('test') | |
setTimeout(function(){ | |
$('.login').addClass('testtwo') | |
},300); | |
setTimeout(function(){ | |
$(".authent").show().animate({right:-320},{easing : 'easeOutQuint' ,duration: 600, queue: false }); | |
$(".authent").animate({opacity: 1},{duration: 200, queue: false }).addClass('visible'); | |
},500); | |
setTimeout(function(){ | |
$(".authent").show().animate({right:90},{easing : 'easeOutQuint' ,duration: 600, queue: false }); | |
$(".authent").animate({opacity: 0},{duration: 200, queue: false }).addClass('visible'); | |
$('.login').removeClass('testtwo') | |
},2500); | |
setTimeout(function(){ | |
$('.login').removeClass('test') | |
$('.login div').fadeOut(123); | |
},2800); | |
setTimeout(function(){ | |
$('.success').fadeIn(); | |
},3200); | |
}); | |
$('input[type="text"],input[type="password"]').focus(function(){ | |
$(this).prev().animate({'opacity':'1'},200) | |
}); | |
$('input[type="text"],input[type="password"]').blur(function(){ | |
$(this).prev().animate({'opacity':'.5'},200) | |
}); | |
$('input[type="text"],input[type="password"]').keyup(function(){ | |
if(!$(this).val() == ''){ | |
$(this).next().animate({'opacity':'1','right' : '30'},200) | |
} else { | |
$(this).next().animate({'opacity':'0','right' : '20'},200) | |
} | |
}); | |
var open = 0; | |
$('.tab').click(function(){ | |
$(this).fadeOut(200,function(){ | |
$(this).parent().animate({'left':'0'}) | |
}); | |
}); |
@import url(http://fonts.googleapis.com/css?family=Gudea:400,700); | |
body{ | |
perspective:800px; | |
height: 100vh; | |
margin:0; | |
overflow: hidden; | |
font-family: 'Gudea', sans-serif; | |
background: #EA5C54 ; /* Old browsers */ | |
background: -moz-linear-gradient(-45deg, #EA5C54 0%, #bb6dec 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#EA5C54 ), color-stop(100%,#bb6dec)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(-45deg, #EA5C54 0%,#bb6dec 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(-45deg, #EA5C54 0%,#bb6dec 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(-45deg, #EA5C54 0%,#bb6dec 100%); /* IE10+ */ | |
background: linear-gradient(135deg, #EA5C54 0%,#bb6dec 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EA5C54 ', endColorstr='#bb6dec',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
::-webkit-input-placeholder { | |
color: #4E546D | |
} | |
.authent{ | |
display:none; | |
background: #35394a; /* Old browsers */ | |
background: -moz-linear-gradient(45deg, #35394a 0%, #1f222e 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#35394a), color-stop(100%,#1f222e)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* IE10+ */ | |
background: linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
position: absolute; | |
left: 0; | |
right: 90px; | |
margin: auto; | |
width: 100px; | |
color: white; | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
text-align: center; | |
padding: 20px 70px; | |
top: 200px; | |
bottom: 0; | |
height: 70px; | |
opacity: 0; | |
p{ | |
text-align:center; | |
color:white; | |
} | |
} | |
.success{ | |
display:none; | |
color: rgb(213, 216, 226); | |
p{ | |
font-size:14px; | |
} | |
} | |
p{ | |
color: #5B5E6F; | |
font-size:10px; | |
text-align:left; | |
} | |
.testtwo{ | |
left:-320px !important; | |
} | |
.test{ | |
box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55); | |
pointer-events:none; | |
top:-100px !important; | |
transform:rotateX(70deg) scale(.8) !important; | |
opacity: .6 !important; | |
filter: blur(1px); | |
} | |
.login{ | |
opacity:1; | |
top:20px; | |
-webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, .85); | |
transition-property:transform,opacity,box-shadow,top,left; | |
transition-duration:.5s; | |
transform-origin:161px 100%; | |
transform:rotateX(0deg); | |
position:relative; | |
.validation{ | |
position:absolute; | |
z-index:1; | |
right:10px; | |
top:6px; | |
opacity:0; | |
} | |
.disclaimer{ | |
position: absolute; | |
bottom: 20px; | |
left: 35px; | |
width: 250px; | |
} | |
width:240px; | |
border-top: 2px solid #D8312A; | |
height:300px; | |
position:absolute; | |
left:0; | |
right:0; | |
margin:auto; | |
top:0; | |
bottom:0; | |
padding:100px 40px 40px 40px; | |
background: #35394a; /* Old browsers */ | |
background: -moz-linear-gradient(45deg, #35394a 0%, #1f222e 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#35394a), color-stop(100%,#1f222e)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* IE10+ */ | |
background: linear-gradient(45deg, #35394a 0%,#1f222e 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
&_title{ | |
color:rgb(175, 177, 190); | |
height:60px; | |
text-align:left; | |
font-size:16px; | |
} | |
&_fields{ | |
height: 208px; | |
position: absolute; | |
left: 0; | |
.icon{ | |
position: absolute; | |
z-index: 1; | |
left: 36px; | |
top: 8px; | |
opacity:.5; | |
} | |
input[type='password']{ | |
color:#DC6180 !important; | |
} | |
input[type='text'],input[type='password']{ | |
color: #afb1be; | |
width: 190px; | |
margin-top:-2px; | |
background: rgb(50, 54, 74); | |
left: 0; | |
padding: 10px 65px; | |
border-top: 2px solid rgb(57, 61, 82); | |
border-bottom: 2px solid rgb(57, 61, 82); | |
border-right: none; | |
border-left: none; | |
outline: none; | |
font-family: 'Gudea', sans-serif; | |
box-shadow: none; | |
} | |
&__user,&__password{ | |
position:relative; | |
} | |
&__submit{ | |
position: relative; | |
top: 35px; | |
left: 0; | |
width: 80%; | |
right: 0; | |
margin: auto; | |
.forgot{ | |
float: right; | |
font-size: 10px; | |
margin-top: 11px; | |
a{ | |
color: rgb(96, 100, 121); | |
} | |
text-decoration: underline; | |
} | |
input{ | |
&:focus{ | |
box-shadow:none; | |
outline:none; | |
} | |
border-radius:50px; | |
background:transparent; | |
padding:10px 50px; | |
border:2px solid #DC6180 ; | |
color: #DC6180 ; | |
text-transform:uppercase; | |
font-size:11px; | |
transition-property:background,color; | |
transition-duration:.2s; | |
&:hover{ | |
color:white; | |
background:#DC6180 ; | |
cursor:pointer; | |
transition-property:background,color; | |
transition-duration:.2s; | |
} | |
} | |
} | |
} | |
} | |
} | |
/* Color Schemes */ | |
.love{ | |
position: absolute; | |
right: 20px; | |
bottom: 0px; | |
font-size: 11px; | |
font-weight: normal; | |
p{ | |
color:white; | |
font-weight:normal; | |
font-family: 'Open Sans', sans-serif; | |
} | |
a{ | |
color:white; | |
font-weight:700; | |
text-decoration:none; | |
} | |
img{ | |
position:relative; | |
top:3px; | |
margin:0px 4px; | |
width:10px; | |
} | |
} | |
.brand{ | |
position:absolute; | |
left:20px; | |
bottom:14px; | |
img{ | |
width:30px; | |
} | |
} |