Login Box Concept

index.haml

.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>

Login Box Concept.markdown

Login Box Concept

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.

License.

script.js

$('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'})
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.scss

@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;
  }
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />