flyLabel.js - DEMO
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.
You'll probably want to download the minified version in dist/
.
$ curl -O https://raw.github.com/athaeryn/flyLabel.js/master/dist/flyLabel.min.js
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.input.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.
If you'd like to contribute a behavior to the demo, follow the guide below. If you'd like to contribute to the project in general, the information below is probably still worth a read.
-
Clone the repository
$ git clone https://github.com/athaeryn/flyLabel.js.git $ cd flyLabel.js
-
Run Bundle
$ bundle
-
Start Guard
$ bundle exec guard
-
Add a file to
demo/behaviors/
$ $EDITOR demo/behaviors/new-behavior-name.css
Use one of the existing files as a guide, and check
demo/style.css
for any styles that are applied to all of the labels. Add a line at the top of your new behavior's file with your name and GitHub username, e.g./* by Mike Anderson - athaeryn */
-
Submit a Pull Request
These people were tremendously helpful in the creation of this plugin: