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

ユーザーがフォームに入力する際、その進捗をアニメーションで美しく表示するjQuery不要の単体で動作するスクリプトを紹介します。

進捗のデザインは邪魔にならないので、ほとんどのサイトで利用できると思います。

サイトのキャプチャ

Fort.js -GitHub

Fort.jsのデモ

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

デモのキャプチャ

デモページ:Default

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

デモのキャプチャ

一つ目を入力

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

デモのキャプチャ

二つ目を入力

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

デモのキャプチャ

デモページ:Sections

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

Fort.jsの使い方

Step 1: 外部ファイル

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

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

Step 2: HTML

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

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

Step 3: JavaScript

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

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

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

Default
solid()
Gradient
gradient()
Sections
sections()
Flash
flash()

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

sponsors

top of page

©2018 coliss