Foxholder

JavaScript

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

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

Foxholder

デモ

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

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

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

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

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

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

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

Foxholder

Expanding Bar Navigation Conceptコンテンツエリアがダイナミックに開かれる「Expanding Bar Navigation Concept」前のページ

シンプルなシェアボックス(ソーシャルボタンリスト)を実装できる「jquery.sharebox」次のページNO IMAGE

関連記事

  1. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  2. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  3. Bootstrap Dropdown Hover
  4. jQueryプラグインで実装できるカレンダー

    JavaScript

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

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

  5. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  6. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP