フォーカスでシュワーっと消えていく、プレースホルダ

animated placeHolder

DEMO 表示

input要素の欄にフォーカス(入力できる状態)にすると

input要素にあるプレースホルダが、ぼやけてシュワーーっと消えていくアニメーションが特徴的

jQueryを使って、フォーカスが当たると、

blurというクラスをつけて、文字をぼかしています

文字をぼかす方法は最近よく見かける手法で

colorにtransparent

text-shadow でぼかし度多めの文字の影

この組み合わせにすることで、文字は透明に、影だけ表示させることが出来

ぼやけた影が、ぼかしとなります

あとは、変化をアニメーション化

コードのここがポイント

.blur{
   text-shadow: 0 0 10px #7f8c8d;
   color: transparent;
   
  animation: scale 1s ease-in-out  alternate;
    -webkit-animation: scale 1s ease-in-out  alternate;
   -moz-animation: scale 1s ease-in-out  alternate;
}

コード全体

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>vanishing placeHolder</h2>
<form>
    
    <div class="my_input">
        <input type="text" /> 
        
        <span class="placeHolder">User Name</span>
        <i class="fa fa-user"></i>
    </div>
    <div class="my_input">
    
        <input type="password" /> 
        
        <span class="placeHolder">Password</span>
        <i class="fa fa-key"></i>
    </div>
    </form>

CSS

body{
  margin: 0;
  padding: 0;
  background-color: rgb(52, 73, 94);
}
h2{
color:#ecf0f1;
text-align:center;
font-family: Helvetica, Arial, sans-serif;
font-size:20pt;
text-transform:uppercase;
}
.my_input{
  position: relative;
font-family: Helvetica, Arial, sans-serif;
font-size: 18pt;
line-height: 2.6em;
height: 40px;
margin-bottom: 10px;
padding: 0;
width: 200px;
}
form{
  height: 120px;
  width: 300px;
  margin:50px auto;
}
input{
 font-size: 18pt;
border: none;
outline: none;
position: absolute;
top: 0;
left: 0;
display: block;
background-color: #ecf0f1;
height: 40px;
margin-bottom: 2%;
padding-left: 50px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
color:#676868;
}
i{

display:block;
position:absolute;
left:12px;
top:8px;
color:#7f8c8d;
text-shadow: 0px 2px 40px #7f8c8d;

}
.placeHolder{
color: #bdc3c7;
display: block;
position: absolute;
top: 0;
left: 50px;
font-size: 18pt;
line-height: 40px;
}
.blur{
   text-shadow: 0 0 10px #7f8c8d;
   color: transparent;
   
  animation: scale 1s ease-in-out  alternate;
    -webkit-animation: scale 1s ease-in-out  alternate;
   -moz-animation: scale 1s ease-in-out  alternate;
}

   
  
@keyframes scale { 
  50% { transform: scale(1.3);
  
  }
}
@-webkit-keyframes scale { 
  50% { -webkit-transform: scale(1.3);
    
  }
}

javascript

$(document).ready(function(){
    
    $( "input").focus(function(e) {
    
          $( e.target ).next("span").addClass( "blur" ).fadeOut( 900 );
    });
    $( "input" ).blur(function(e) {
        var val=$(e.target).val();
          if(!val){
              $(  e.target  ).next("span").removeClass( "blur" ).fadeIn( 300 );
          }
          
    });
    $( "span " ).click(function(e) {
    
          $( e.target ).addClass( "blur" ).fadeOut( 900 );
        $(e.target).prev("input").focus();
    });
});

コードをファイルでダウンロードする

DOWNLOAD