Foxholder

JavaScript

プレースホルダに多彩なアニメーションエフェクトを付けれる「Foxholder」

Foxholderはプレースホルダ(placeholder)に多彩なアニメーションエフェクトを付けれるjQueryプラグインです。アニメーションは全部で15種類も用意されているので、自分好みのアニメーションが見つかりやすそうですね。

Foxholder

デモ

デモは1〜15まで用意されています。ボックス内にカーソルを合わせることで各デモのアニメーションエフェクトを確認することが可能です。

フェードアウトするものや縮小するもの、ボックスの外にスライドするものなどなど、さまざまなアニメーションエフェクトが用意されています。

単純にボックス内にカーソルを合わせるだけではなく、アニメーションが付いていることで「入力できる状態」になったことを把握しやすいし、何より見た目もかっこいいですね。

テキストを入力する際のモチベーションも高まるかもしれません。

使い方に関しても特に難しい設定もなく手軽に実装できるかと思います。

また、エフェクトはクロスブラウザ(IE 9+、Safari 9+、FF、Opera、Chrome、Edge)に対応しています。

15種類という豊富なアニメーションエフェクトから選べる、かっこいいプレースホルダを実装したいという人は、ぜひ「Foxholder」を活用されてみてはいかがでしょうか?

Foxholder

関連記事

  1. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  2. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  3. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  4. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  5. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  6. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

最近の記事

  1. SF-G64T
  2. USB Type-C搭載ドッキングステーション
  3. RX100M6

Facebookページ

PAGE TOP