[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ
Post on:2013年10月17日
sponsorsr
先月の終わりにdribbbleで公開された時に、うわっかっこいいな！と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。
まずは、dribbbleでのコンセプトから。
フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移動し小さく表示されます。
これはスマフォでは特に重要な省スペースとしても優れており、また入力後にそれが何の項目であったかユーザーに伝えることができます。
で、そのコンセプトにインスパイアされて開発されたスクリプトが「JVFloat.js」です。
スクリプトは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>
sponsors
