入力フォームをオシャレにできる jQueryプラグイン『Foxholder』 の使い方

今回は入力フォームにオシャレなアニメーションエフェクトを実装できるjQueryプラグイン『Foxholder』の使い方を解説させていただきます。

Foxholderを使えば、HTMLのformタグで作成した入力フォームのプレースホルダ―に15種類のアニメーションエフェクトから好きなものを選んで実装することができます。また、ボタンのホバーエフェクトも6種類用意されており、Foxholder一つでプレースホルダ―とボタンの両方のアニメーションエフェクトを実装することができます。

アニメーションエフェクトのサンプルデモサイトがありますのでご確認ください。

Foxholder デモサイト

それでは早速Foxholderを実装するための使い方を見ていきましょう。

目次

Foxholderのファイルをダウンロードして読み込む

まずはGithubからFoxholderの読み込みに必要なファイルをダウンロードしましょう。

Github Foxholder

FoxholderのGithub画面

jQueryを読み込んだうえで、ダウンロードしたファイルの中のsrcフォルダ内にある『folder.js(foxholder.min.jsでも可)』と『foxholder-styles.css』をHTMLに読み込んでください。そして最後に実行タグを読み込ませれば、jQueryプラグインが動き出すことになります。

<head>
<link rel="stylesheet" href="css/foxholder-styles.css" /><!-- FoxholderのCSSを読み込む -->
</head>
<body>


<!-- HTMLマークアップ -->

<!-- jQueryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Foxholderのjsファイルを読み込む -->
<script src="scripts/foxholder.js"></script>

<!-- 実行タグ -->
<script>
 jQuery('.your-class').foxholder({
    placeholderDemo: 1, // プレースホルダ―のアニメーションDemo1~15の中から好きなエフェクトを番号で指定
    buttonDemo: 1 //ボタンのアニメーションDemo1~6の中から好きなエフェクトを番号で指定
  });
</script>
</body>

これでまずはFoxholderの実装に必要なファイルを読み込みました。jQueryプラグインの導入がよくわからない方は[初心者向け] jQueryとは?プラグインの導入方法を実践解説の記事を先に読んでjQueryプラグインについて理解を深めておきましょう。

Foxholderで入力フォームをアニメーション化させる

それではFoxholderに必要なファイルを読み込んだうえで、下記のようなHTMLを設置してください。良い感じにレイアウトとアニメーションが施されたフォームが出来上がるかと思います。

<form class="your-class">
    <input id="your-id-1" type="text" placeholder="入力してください" />
    <textarea id="your-id-2" placeholder="入力してください"></textarea>
    <button type="submit" data-size="bg" data-filled="filled" data-direction="diagonal">送信</button>
</form>

Foxholderの導入イメージサンプル

もしこのような入力フォームのアニメーションが実装されなければどこかで記述や入力方法を間違えてしまっているかもしれません。下記の項目を特に注意して見直してみてください。

よくある間違い
  • jsファイル、cssファイルのディレクトリ名が間違っており読み込まれていない。
  • jQueryのCDNが古いバージョンで適応されていない。
  • 実行タグの読み込みがされていない。
  • サイトのキャッシュが残っており更新前の状態になっている。

様々なバリエーションのエフェクトに変更する

Foxholderにはプレースホルダ―のアニメーションエフェクトが15種類、ボタンのホバーエフェクトが6種類も用意されています。エフェクトを変更する方法はとても簡単で、実行タグに入力しているplaceholderDemobuttonDemoの数字を好きなエフェクトの番号に変更するだけで出来てしまいます。

例えば下記のようにplaceholderDemoを「3」として、buttonDemoを「2」とすれば、それぞれFoxholderのデモサイトに応じた番号のエフェクトが実装されるのです。

<script>
 jQuery('.your-class').foxholder({
    placeholderDemo: 3, // プレースホルダ―のアニメーションDemo1~15の中から好きなエフェクトを番号で指定
    buttonDemo: 2 //ボタンのアニメーションDemo1~6の中から好きなエフェクトを番号で指定
  });
</script>
</body>

プレースホルダ―のアニメーションエフェクト

それでは1~15番まであるプレースホルダーのアニメーションエフェクトがどのような動きをするのか一覧で見てみましょう。

placeholderDemo:1 | ふわっと文字が消えるブレースホルダー

Foxholder ふわっと文字が消えるブレースホルダー

placeholderDemo:2 | 文字が左上に移動して色が変わるプレースホルダー

Foxholder 文字が左上に移動して色が変わるプレースホルダー

placeholderDemo:3 | 斜めの背景がシュッと現れるプレースホルダー

Foxholder 斜めの背景がシュッと現れるプレースホルダー

placeholderDemo:4 | 文字が左へ飛び出ちゃうプレースホルダ―

Foxholder 文字が左へ飛び出ちゃうプレースホルダ―

placeholderDemo:5 | 文字がどっかいっちゃうプレースホルダ―

Foxholder 文字がどっかいっちゃうプレースホルダ―

placeholderDemo:6 | 文字が右に消えるプレースホルダ―

Foxholder 文字が右に消えるプレースホルダ―

placeholderDemo:7 | 左に三角が現れるプレースホルダー

Foxholder 左に三角が現れるプレースホルダー

placeholderDemo:8 | 文字間が開きながら消えていくプレースホルダー

Foxholder 文字間が開きながら消えていくプレースホルダー

placeholderDemo:9 | 背景と文字色がシュッと変わるプレースホルダー

Foxholder 背景と文字色がシュッと変わるプレースホルダー

placeholderDemo:10 | フィールドセットみたいになるプレースホルダ―

Foxholder フィールドセットみたいになるプレースホルダ―

placeholderDemo:11 | 文字が消えて枠線の色が変わるプレースホルダー

Foxholder 文字が消えて枠線の色が変わるプレースホルダー

placeholderDemo:12 | 文字が消えて点が現れるプレースホルダー

Foxholder 文字が消えて点が現れるプレースホルダー

placeholderDemo:13 | 文字の周りに囲いが現れるプレースホルダー

Foxholder 文字の周りに囲いが現れるプレースホルダー

placeholderDemo:14 | 文字の背景色が変わり下線が現れるプレースホルダー

Foxholder 文字の背景色が変わり下線が現れるプレースホルダー

placeholderDemo:15 | ペナントのような背景が現れるプレースホルダー

Foxholder ペナントのような背景が現れるプレースホルダー

ボタンのホバーエフェクト

続いてボタンのホバーエフェクトは1~6番まで用意されています。2番と3番はエフェクトの方向を変える設定も用意されています。

buttonDemo:1 | ホバーでふわっと色が変わるボタン

Foxholder ホバーでふわっと色が変わるボタン

buttonDemo:2 | ホバーで端から背景色がシュッと変わるボタン

Foxholder ホバーで端から背景色がシュッと変わるボタン

※2番に限り、buttonタグにdata-direction属性を与えることで、エフェクトの方向(left、right、top、bottom)を変えることができます。

記述例↓

<button type="submit" data-direction="bottom">送信</button>

buttonDemo:3 | ホバーで真ん中から背景色がパカっと変わるボタン

Foxholder ホバーで真ん中から背景色がパカっと変わるボタン

※3番に限り、buttonタグにdata-direction属性を与えることで、エフェクトの方向(vertical、horizontal、horz-vert、diagonal)を変えることができます。

記述例↓

<button type="submit" data-direction="diagonal">送信</button>

buttonDemo:4 | ホバーで背景色が真ん中へシュッと切り変わるボタン

Foxholder ホバーで背景色が真ん中へシュッと切り変わるボタン

buttonDemo:5 | ホバーでふにっと角丸になるボタン

Foxholder ホバーでふにっと角丸になるボタン

buttonDemo:6 | ホバーでブルっと揺れるボタン

Foxholder ホバーでブルっと揺れるボタン

まとめ

今回は入力フォームをオシャレにカスタマイズできるjQueryプラグイン『Foxholder』を紹介させていただきましたがいかがでしたでしょうか?

問い合わせフォームはサイトのコンバージョンに直結する重要な部分なので、サイト利用者にストレスを与えることなくスムーズな手順で進められることが必要とされます。Foxholderを使って見やすく快適な入力フォームを作ってみてはいかがでしょうか?

きっとあなたのサイトのコンバージョン率も上がるはず!?