[JS]フォームの入力時にラベルがスライドするスクリプト -Sliding Labels

フォームの入力時に、入力欄に配置されたラベルが枠外にアニメーションで移動するスクリプトをCSSKarmaから紹介します。

デモのキャプチャ

Form Design with Sliding Labels
デモページ

スライドするアニメーションもクールですが、フォームのデザインをすっきりできるのもこのスクリプトの大きな特長です。

通常のマークアップ、スタイルシートの適用、スクリプトの適用と三段階を比べてみます。

サイトのキャプチャ

通常のマークアップ時

サイトのキャプチャ

スタイルシートの適用時

サイトのキャプチャ

スクリプトの適用時

また、スクリプトのオフ時には下記のように表示されます。

サイトのキャプチャ

スクリプトのオフ時スクリプトのオプションではラベルのカラー、ポジションが設定できます。

Sliding LabelsはjQueryのプラグインのため、実装にはjquery.jsが必要です。

sponsors

top of page

©2018 coliss