[JS]入力するのが楽しくなるアニメーションを備えたフォーム -Fancy Input

フォームにテキストを入力する際、ちょっと面白いアニメーション（5種類）を与えるjQueryのプラグインを紹介します。

colissと入力、そして削除すると、こんな感じです。

Fancy Input
Fancy Input -GitHub

• Fancy Inputのデモ
• Fancy Inputの使い方

Fancy Inputのデモ

デモはFirefox, Chrome, Safari, Operaでご覧ください。
IEはゴメンナサイとのことで、通常通りに入力できるだけです。

デモページ

デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。
※日本語の入力は対応していないようです、残念。

Fancy Inputの使い方

実装は非常に簡単です。

Step 1: 外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。

<link rel="stylesheet" href="fancyInput.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='fancyInput.js'></script>

Step 2: HTML

フォームは普通に実装するだけです。

<div>
    <input type='text' />
</div>
<div>
    <textare></textarea>
</div>

Step 3: JavaScript

jQueryのセレクタで適用するフォームを指定し、スクリプトを実行します。

<script>
    $('div :input').fancyInput();
</script>