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. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

  2. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

  3. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

  4. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

  5. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  6. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP