プレースホルダにテキストアニメーションを付けるjsライブラリ

HTML5からinputタグにplaceholder属性が使えるようになりました。

フォームの説明代わりにも使えるので、フォーム内のインプットタグに導入している人も多いと思います。

そんな便利なplaceholder属性ですが、今回はplaceholder内にテキストアニメーションが追加出来るJavascriptライブラリ "superplaceholder.js"の紹介です。

このsuperplaceholderは上のGIF動画の様にplaceholderを拡張出来ます。また、jQuery等の外部ライブラリにも依存していません。

例えば、ユーザーアカウント登録時のインプットフォームに”特定文字使用禁止”を促したい時やlabelタグの説明文の省略代わりに使えそうです。

それでは少し試してみましょう！
 

インストールにはGitHubのページからライブラリをインストールするか、bower又はnpmでのインストールにも対応しています。

# bowerからインストールする場合
bower install superplaceholder

# npmからインストールする場合
npm install superplaceholder

使い方も至ってシンプルです。" el "にターゲットの属性が入り、" sentences "に表示させたいテキストが入ります。

# 基本的な使い方
superplaceholder({
    el: document.querySelector('input'),　// input属性
    sentences: [ '何か表示されます', '２番めに表示されます'] // 表示させたいテキスト
});

# オプション
superplaceholder({
    el: document.querySelector('input'),
    sentences: [ '何か表示されます', '２番めに表示されます'],
    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.

superplaceholder.jsの説明は以上です。

インプットフォームを使う時に使用すると、ユーザーにわかりやすくフォーム入力の説明出来そうですね。

公式ページ: superplaceholder.js