[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js

Post on:2014年6月2日

Fort.jsのデモ

デモでは、4種類のエフェクトが用意されています。

フォームに一つ入力するごとに、ブラウザの上部にバーが表示され、進捗を現します。

一つ目を入力

二つ目を入力すると、バーはアニメーションで進みます。

二つ目を入力

Defaultはソリッドなカラーを使った単色のバーで、下記のSectionsでは各セクションごとに異なるカラーで表示されます。

デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。

当スクリプトとスタイルシートを外部ファイルとして記述します。

<head>
  ...
  <script src="fort.min.js"></script>
  <link rel="stylesheet" href="fort.min.css">
</head>

バーを表示するdivをセットします。

<body>
  <div class="top">
    <div class="colors"></div>
  </div>

適用するエフェクトを指定し、スクリプトを実行します。

<body>
  ...
<script>
  solid();
</script>
</body>

エフェクトごとの指定は、下記の通りです。

バーのサイズや表示位置を変更する時は、スタイルシート内の「height: 4px;」や「top: 0;」を変更してください。