Skip to content

archang/flyLabel.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

flyLabel.js - DEMO

Your labels wish they were this fly

Inspired by Matt Smith's float label concept.

It's not the goal of this plugin to look like the FloatLabel concept. In fact, the goal is not to look like anything at all. The style, transitions, and animations are all determined by CSS. There are several examples in the demo.

Get it

You'll probably want to download the minified version in dist/.

$ curl -O https://raw.github.com/space150/flyLabel.js/master/dist/flyLabel.min.js

Use it

This snippet from the demo is pretty self-explanatory:

<script src="/demo/vendor/jquery.min.js"></script>
<script src="/dist/flyLabel.min.js"></script>
<script>
  if (Modernizr.placeholder) {
    $('body').flyLabels();
  }
</script>

Of course, a little more explanation can't hurt, right? You can call flyLabels() on a container element, and all the elements with class .fly-group will be automagically made awesome. I'm going to get around to writing more thorough documentation on this soon, but the demo should be helpful for now.

Thank You

These people were tremendously helpful in the creation of this plugin:

Releases

No releases published

Packages

No packages published

Languages

  • CSS 71.0%
  • HTML 16.6%
  • Ruby 7.3%
  • JavaScript 5.1%