Animated Floating Input label Plugin With jQuery And CSS3 - flying-labels.js

flying-labels.js is a jQuery plugin that helps you create floating labels (placeholders) with CSS3 animations for your input and textarea elements.

How to use it:

1. Link to jQuery library and the jQuery flying-labels.js plugin's files as follows:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.flying-labels.js"></script>
<link rel="stylesheet" href="jquery.flying-labels.css">

2. Use placeholder attribute to define the content to be displayed in the floating labels:

<input type="text" 
       name="field" 
       placeholder="Placeholder text" 
       value="The text is still here">

<input type="password" 
       name="field2" 
       placeholder="Placeholder 2 text">

<textarea name="" 
          placeholder="Simple text">
</textarea>

3. Initialize the plugin and done.

$("input,textarea").fly();

4. Config the floating labels with the following plugin settings.

$("input,textarea").fly({
  
  'wrapperClass': 'it-wrapper',
  'placeholderClass': 'placeholder',
  'animationTime': '200',
  'showAnimation': 'slideInUp',
  'hideAnimation': 'zoomOut'
  
});

---

This awesome jQuery plugin is developed by VladFedotov. For more Advanced Usages, please check the demo page or visit the official website.