ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Placeholderも当たり前のように使われるようになっています。入力部分にあらかじめ文字を出しておくことによって、何を入力すれば良いかを明示できるようになります。ユーザとしても嬉しい仕組みでしょう。

そんなPlaceholderを一歩進めてみたのがsuperplaceholder.jsです。どこがスーパーなのか、それは文字が動く点です。

superplaceholder.jsの使い方

デモです。何を入力すべきか、さらにどんな文字を入れるべきかを明示しています。

フォームでの例です。パスワードの例なども出せます。文字を送る速度も変更可能です。

Placeholderがアニメーションするというのはなかなか斬新で面白いアイディアです。ついつい多くの情報を詰め込んでしまってPlaceholderが読みづらくなってしまうことがあるので、アニメーションによって短い文章を何回かに分けて送信するのも良さそうです。

superplaceholder.jsはJavaScript製、Creative Commonsのオープンソース・ソフトウェアです。

superplaceholder.js - super charge your input placeholders

chinchang/superplaceholder.js: ⚡Super charge your input placeholders

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2