UX 2 : Password morph

index.html

<h1 class="center grey-text">Password morph</h1>
<p class="center grey-text">A simple sign in concept for mobile.</p>
<div class="container z-depth-3">
  
  <div class="layer layer-1 darken-4 white-text">
    <div class="icon-bar">
      <i class="material-icons menu">menu</i>
<!--       <i class="material-icons right">info_outline</i> -->
    </div>
    <div class="bg-content">
      
      <i class="large material-icons"></i>
      <ul class="collection left-align">
        <li class="collection-item transparent"><h5>Your options</h5></li>
        <li class="collection-item transparent">Enable touch ID<div class="switch  right">
    <label>
      <input class="blue" type="checkbox">
      <span class="lever"></span>
    </label>
  </div></li>
        <li class="collection-item transparent">Save user ID<div class="switch right">
    <label>
      <input type="checkbox">
      <span class="lever"></span>
    </label>
  </div></li>
        <li class="collection-item transparent">Forgot password</li>
        <li class="collection-item transparent">Confirm card</li>
        <li class="collection-item transparent">Create an account</li>
        <li class="collection-item transparent">Contact us</li>
        <li><hr /></li>
        <li class="collection-item transparent">Sign out</li>
      </ul>
    </div>
  </div>
  <div class="layer layer-2 z-depth-1">
    <div class="preloader-wrapper big">
      <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
    </div>
    <div class="center">
<!--       <i class="large material-icons grey-text">list</i> -->
      
      
      <ul class="collection peek">
        <li class="profile-content">
          <div class="circle z-depth-1"></div>
          <h5 class="white-text">Good Morning, Anton</h5>
        <hr />
        </li>
        <li class="white  ">    
          <div class="input-field sign-in z-depth-1">
            <input id="last_name" type="password" class="validate">
            <label for="last_name">Password</label>
          </div>
        </li>
<li class="collection-item transparent delay-four">   
    <p class=" white-text">$2,465.00</p> 
    <span class="white-text"><small>Statement balance</small></span>      
   
</li>

<li class="collection-item transparent delay-three"> 
<p class=" white-text">$2,500.00</p>   
    <span class="white-text"><small>Current balance</small>
    </span>      
    
</li>
        
<li class="collection-item transparent delay-two">    
    <p class=" white-text">March 2nd</p>
    <span class="white-text"><small>Payment due date</small></span>      
    
</li>

<li class="collection-item transparent delay-one">   
    <p class=" white-text">$35.00</p> 
    <span class="white-text"><small>Minimum amount due</small></span>      
    
</li>
      
    </ul>
      
      <br />
      <div class="btn transparent darken-3 add-item btn-flat white-text">
        
        <span class="left opacity-0 close"><i class="material-icons">close</i></span>
      <span class="right"><i class="material-icons">arrow_forward</i></span></div>
    </div>
  </div>
<!--   <div class="layer layer-3 z-depth-1 grey-text">
    <p class="task-count center">You have no completed tasks</p>
  </div> -->
</div>  

script.js

var s = false;

$('body').on('click', '.btn', function(){
    s = true
    console.log(s)
    $(this).toggleClass('meet');
  
    $('.collection-item').toggleClass('merge');
    $('hr').toggleClass('opacity-0')
  
  $('.sign-in').toggleClass('reveal').find('input');
  $('.close').toggleClass('opacity-0');
  $('.circle').toggleClass('grow')
}).on('click', '.icon-bar', function(){
    var one = $(this),
        two = $('.layer-2'),
        three = $('.layer-3');
  
  if (s){
    s = false;
    $('.collection-item').removeClass('merge');
    $('.sign-in').removeClass('reveal');
    $('.btn').removeClass('meet');
    $('hr').removeClass('opacity-0');
    $('.close').addClass('opacity-0');
    $('.circle').removeClass('grow')
  }
    two.toggleClass('move-down');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

html *{
  transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1) !important;
  font-family: 'Open Sans';
  font-weight: 300;
  letter-spacing: .5px
}

body{
  background-image: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png');
}
hr{
  width: 10%;
  margin: 20px auto
}

i{
  position: relative;
  z-index: 3
}
.icon-bar{
  position: relative; 
  cursor: pointer;
}

.container{
  width: 320px;
  height: 580px;
  margin: 0 auto;
  margin-bottom: 100px;
  position: relative;
  overflow: hidden;
  top: 50px;
}

.layer{
  position: absolute;
  height: 100%;
  width: 100%;
}

.layer-1{
  height: 100%;
  padding: 15px;
background: #1a237e;
background: -moz-linear-gradient(top, #1a237e 0%, #3f51b5 100%);
background: -webkit-linear-gradient(top, #1a237e 0%,#3f51b5 100%);
background: linear-gradient(to bottom, #1a237e 0%,#3f51b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a237e', endColorstr='#3f51b5',GradientType=0 );

}

.layer-2{
  transition-delay: .3s;
  background: #eee;
  top: 0;
  padding: 30px;
/*   background: url(https://www.wpfaster.org/wp-content/uploads/2013/06/blurry-city-lights.jpg); */
background: #2989d8;
background: -moz-linear-gradient(top,  #2989d8 0%, #1b3e89 100%);
background: -webkit-linear-gradient(top,  #2989d8 0%,#1b3e89 100%);
background: linear-gradient(to bottom,  #2989d8 0%,#1b3e89 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#1b3e89',GradientType=0 );


}

.layer-2:before {
    content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
/* 		background-image: linear-gradient(to bottom right,#002f4b,#dc4225); */
		opacity: .6; 
  }

.layer-3{
  transition-delay: .2s;
  background: #ccc;
  top: 520px
}

.btn{
  margin: 0 auto;
  width: 100%;
  position: relative;
  bottom: 0;
  box-shadow: none !important;
/*   border: 1px solid white; */
  
}

.move-down{
  top: 580px;
}

.completed{
  bottom: 0 !important;
  opacity: 1;
  transform: scale(1);
}

.bg-content{
  margin: 30% 0;
}

.preloader-wrapper{
  position: absolute; 
  top: 30%; 
  left: 40%;
  
}

.collection{
  border: none;
  position: relative;
  height: 455px;
  overflow: ;
}

.meet{
  bottom: 220px !important;
  transition-delay: .5s !important;
}
.collection-item{
 overflow: hidden;
 position: relative !important;
 top: 0;
 border: none !important;
 text-align: left;
 transition: all .2s ease-in-out !important;
}
.collection-item p{
 margin: 0;
}

.merge{
 top: -15px !important;
 position: relative;
 opacity: 0;
 
}

.show-input{
  
}

.circle{
  height: 75px; 
  width: 75px; 
  margin-bottom: 20px; 
  background: url(http://www3.pictures.zimbio.com/mp/qi2r5cwgejjl.jpg) no-repeat top center transparent; 
  background-size: 150%;
  margin: 0 auto;
}

.grow{
  transform: translateZ(0);
  height: 100px; 
  width: 100px;
  transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1) !important;
/*   background-size: 190%;  */
  transition-delay: .5s !important;
}

input{
  border: none !important;
  box-shadow: none !important;
}

input[type=text]:focus{
  border: none !important;
  box-shadow: none !important;
}

.input-field{
  margin-top: 0 !important;
  padding: 0 15px;
}

#last_name{
    height: 50px !important;
    margin-bottom: 0 !important;
    font-size: 18px;
    margin-top: 3px;
}

.input-field label.active {
    color: #1E5799 !important;
    position: absolute;
    top: 1.8rem;
    left: -0.25rem;
    cursor: text;
    transition: .2s ease-out;
    padding-left: 15px;
}

.sign-in{
  padding-bottom: 0; 
  opacity: 0; 
  height: 50px;
  top: 170px;
  position: absolute;
  width: 100%;
  
}

.reveal{
/*   height: 50px !important; */
  background: white !important;
  top: 200px !important;
  opacity: 1;
  transition-delay: .5s !important;
  z-index:3;
}

.delay-one{
  transition-delay: .4s !important;
}

.delay-two{
  transition-delay: .3s !important;
}

.delay-three{
  transition-delay: .2s !important;
}

.delay-four{
  transition-delay: .1s !important;
}

.opacity-0{
  opacity: 0;
  transform-origin: 50% 0; 
  transform: scaleX(0);
}

.profile-content{
  margin-top: 50px;
}

.peek .collection-item:hover{
 transform: scale(1.1);
/*  background: rgba(255,255,255, 0.1) !important; */
}

styles

<link href="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

UX 2 : Password morph.markdown

UX 2 : Password morph

Password morph

A simple sign in concept for mobile.

A Pen by Aditya on CodePen.

License.