JVFloat.js - the experiment with form Accessbility and UX in HTML5

I recently discovered the Mobile Form Interaction - http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users by Matt D. Smith, and try to port them into JS

HTML5 input placeholder attribute is the most amazing improvement on input element’s interaction. It’s able to tell what the input means — and can be used as label replacement. However, when we use input without label, the user won’t know what the input means, because the placeholder text is removed when the user insert some text to the input.

Dribbble user Matt D. Smith proposed the fix for the placeholder visibility:

the proposed fix later inspired Jared Verdi to create JVFloatLabeledTextField. Those two inspired me to port the fix to HTML5 input element. And so, JVFloat.js was born.

JVFloat consist of two parts — javascript and css. javascript was used for input detection and class toggling, and the css to control the Animation and overall styles. The styles included is very basic, so you’ll need to adapt the default css into your site’s CSS. JVFloat uses CSS3 transform to perform the animations, so you’ll need to perform a feature detection — by using Modernizr or something — to detect these features. If you don’t, the users won’t see JVFloat’s placeholder on unsupported browsers.

JVFloat is open-source on Github, so adapt and modify this plugin as you like — and send me a pull request :). Also this is my first attempt to write a JQuery or Zepto plugin, so any improvement and suggestion will be very appreciated. tell me your suggestion on JVFloat Issue Page, or mention me on Twitter.