jQuery Plugin For Nice CSS3 Animated Text Fields - Sexyforms

File Size: 24.6 KB
Views Total: 4517
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Nice CSS3 Animated Text Fields - Sexyforms

Sexyforms is a jQuery plugin used to transform a span element into a nice-looking text field with subtle CSS3 powered effects introduced in Codrops' Text Input Effects. Helps you create sexy form elements to enhance the user experiences on all major browsers & platforms.

3 text input effects included:

  • Style 1: floating input label.
  • Style 2: expanding text field
  • Style 3: sliding text field

How to use it:

1. Include the required sexyForms.css for the text input effects.

<link rel="stylesheet" href="css/sexyForms.css">

2. Create a span element with a custom placeholder specified using data-placeholder attribute.

<span data-placeholder="User Name" class="sexyform"></span>

3. Include the JavaScript file sexyforms.js after jQuery library, before the closing body tag.

<script src="sexyforms.js"></script>

4. Apply an effect of your choice to the span element.

$(function() {
  $(.yourInput).sexyForm(one);
});

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