flyLabel.js

Flexible floating form labels to make your boring placeholders super fly. Based on the FloatLabel pattern by Matt Smith. With flyLabel.js, it's easy to trigger custom behaviors on form labels. Check out the examples, and contribute your own.

Classic

Favorite Power Ranger

.classic {
  opacity: 0;
  top: 2em;
  z-index: -1;
}
.classic.is-active {
  opacity: 1;
  top: 1em;
  z-index: 1;
}

Drop

First Name

.drop {
  opacity: 0;
  text-shadow: 0 0 25px blue;
  transform: scale(11);
  z-index: -1;
}
.drop.is-active {
  opacity: 1;
  text-shadow: 0 0 0 blue;
  transform: scale(1);
  z-index: 1;
}

From Right

Last Name

.from-right {
  left: 5em;
  opacity: 0;
}
.from-right.is-active {
  left: 0%;
  opacity: 1;
}

Jiggle

Favorite Color

.jiggle.is-active {
  animation: JIGGLE .3s ease;
  animation-iteration-count: 3;
}

Select

Secret Number

.classic {
  opacity: 0;
  top: 2em;
  z-index: -1;
}
.classic.is-active {
  opacity: 1;
  top: 1em;
  z-index: 1;
}