[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ

先月の終わりにdribbbleで公開された時に、うわっかっこいいな!と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。

まずは、dribbbleでのコンセプトから。

デモのアニメーション

[GIF] Mobile Form Interaction

フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移動し小さく表示されます。

これはスマフォでは特に重要な省スペースとしても優れており、また入力後にそれが何の項目であったかユーザーに伝えることができます。

で、そのコンセプトにインスパイアされて開発されたスクリプトが「JVFloat.js」です。

サイトのキャプチャ

JVFloat.js
JVFloat.js -GitHub

スクリプトはjQueryとZeptoのプラグインとして動作します。

デモのキャプチャ

デモのキャプチャ
※デモはダウンロードファイルに含まれています。

アニメーションのブラッシュアップやコードの最適化など宿題があるそうですが、実装はこんな感じです。
完成が楽しみですね。

<head>
	<meta charset="UTF-8">
	<title>JVFloat.js</title>
	<link rel="stylesheet" href="demo.css">
	<link rel="stylesheet" href="../jvfloat.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script src="../jvfloat.min.js"></script>
</head>
<body>
	<input type="text" placeholder="test" class="testBox">
	<input type="email" placeholder="email" class="testBox">
</body>
<script>
	$('.testBox').jvFloat();
</script>

top of page

©2017 coliss