Fancy Input

JavaScript

かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実装することができます。エフェクトにはCSS3が使われているとのこと。inputまたはtextareaで、エフェクト付きのテキスト入力を実装したい人にはうれしい機能ですね。

Fancy Input

Fancy Input

デモにはEffect 1〜Effect 5までのエフェクトタイプが用意されています。また、入力ボックスもinputとtextareaを選択することが可能です。

実際に文字を入力してみるとわかりますが、エフェクトがあることで文字入力が楽しくなってきますね。ちょっとした遊び心を感じられるので、人とは違ったテキスト入力ボックスを取り入れたい人には最適です。

エフェクトタイプに関しても、文字が上から降ってくるものや横から出てくるものなど、いろんな種類が用意されているところがグッドです。

基本的な使い方もすごく簡単でサクッと実装できると思います。inputタグ、またはtextareaタグをdivで括り、あとはFancy Inputをセットするだけという手軽さです。

単にテキストが入力されていくのではなく、エフェクト付きでユーザーを楽しませたいという人は、ぜひチェックしてみてはいかがでしょうか?

Fancy Input

t-scrollアニメーションとともにアイテムが一つずつ現れる「t-scroll」前のページ

オシャレで多彩なアニメーションが魅力のツールチップ「Playful Little Tooltip Ideas」次のページPlayful Little Tooltip Ideas

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  2. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  3. jQuery Pit-scheduler v2.0
  4. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  5. notie.js

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

  6. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP