サインアップのフォームなどで、それぞれの入力欄が何を入力するものなのか予め情報を示すplaceholderがあります。このplaceholderのテキストをティッカー(テキストを電光掲示板のように流して表示するもの)アニメーションさせて、入力欄であることを強調し、入力を促します。動作には、jQueryを使用しています。
サンプル
サンプルのhtmlソース
<form>
<label> お名前:</label>
<input type="text" name="name" placeholder=" お名前を入力して下さい"><br>
<label> 電話番号:</label>
<input type="text" name="phonenumber" placeholder=" 電話番号を入力して下さい"><br>
<label> Email:</label>
<input type="text" name="email" placeholder=" Emailアドレスを入力して下さい">
</form>
サンプルのCSSソース
label {
display: inline-block;
margin-bottom: 8px;
width: 150px;
}
input {
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 4px;
font-size: 15px;
outline: 0;
padding: 10px;
width: 270px;
box-sizing: border-box;
background-color: #e8eeef;
color: #333;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 20px
}
input:focus {
background: #d2d9dd
}