HTML5からinputタグにplaceholder属性が使えるようになりました。
フォームの説明代わりにも使えるので、フォーム内のインプットタグに導入している人も多いと思います。
そんな便利なplaceholder属性ですが、今回はplaceholder内にテキストアニメーションが追加出来るJavascriptライブラリ "superplaceholder.js"の紹介です。
* superplaceholder.jsのデモGIF

このsuperplaceholderは上のGIF動画の様にplaceholderを拡張出来ます。また、jQuery等の外部ライブラリにも依存していません。
例えば、ユーザーアカウント登録時のインプットフォームに”特定文字使用禁止”を促したい時やlabelタグの説明文の省略代わりに使えそうです。
それでは少し試してみましょう!
インストール
インストールにはGitHubのページからライブラリをインストールするか、bower又はnpmでのインストールにも対応しています。
# bowerからインストールする場合
bower install superplaceholder
# npmからインストールする場合
npm install superplaceholder
superplaceholder.jsの使い方
使い方も至ってシンプルです。" el "にターゲットの属性が入り、" sentences "に表示させたいテキストが入ります。
# 基本的な使い方
superplaceholder({
el: document.querySelector('input'), // input属性
sentences: [ '何か表示されます', '2番めに表示されます'] // 表示させたいテキスト
});
# オプション
superplaceholder({
el: document.querySelector('input'),
sentences: [ '何か表示されます', '2番めに表示されます'],
options: {
// テキストのスピード
letterDelay: 100, // ミリ秒
// センテンスのスピード
sentenceDelay: 1000,
// インプットスタートのフォーカス * デフォルトはfalse
startOnFocus: true,
// センテンスのループ
loop: true,
// シャッフル *デフォルトではセンテンスの順番毎にアニメーションが表示されます
shuffle: false,
// カーソルの表示
showCursor: true,
// カーソル文字
cursor: '|'
}
};
});
もう少し実用的に使うと下記の様なスニペットな感じに。
<div class="container">
<br />
<h4>superplaceholder.jsを使ったデモ</h4>
<!-- id="inputs"に適応させる -->
<input id="inputs" class="form-control" type="text" placeholder="デフォルトのPlaceholder" >
</div>
<!-- ライブラリの読み込み -->
<script src="./superplaceholder/dist/superplaceholder.min.js"></script>
<script>
superplaceholder({
el: document.querySelector('#inputs'), // id="input"適応させる
sentences: [ '切り替わります - 1', 'またまた切り替わります - 2', 'これで最後!']
});
</script>
* 実際に動かしたデモ ( スタイルにはbootstrapを使用しています )
See the Pen EKKJeQ by cupof (@cupof-github) on CodePen.
Summary
superplaceholder.jsの説明は以上です。
インプットフォームを使う時に使用すると、ユーザーにわかりやすくフォーム入力の説明出来そうですね。
公式ページ: superplaceholder.js