If you ever wanted to add some effects to your form input fields to make it look like video games fields, you are in the right place . It’s really one of the most outstanding jQuery styling plugins that I ever stumbled upon. Today we will be viewing the FancyInput plugin and applying some of it’s great effects.
Using it is so simple and straightforward as follows:
Step 1 – Download the plugin from https://github.com/yairEO/fancyInput, extract it in the same folder that includes your HTML file. The extraction will create a folder called fancyInput-master.
Step 2 – Include the jQuery library and link the following two css files in the <head> tag.
<link rel="stylesheet" href="css/fancyInput.css"> <link rel="stylesheet" href="css/styles.css"> <script src='js/jquery-1.9.1.min.js'></script>
Step 3 – Create an input field wrapped in a div tag and assign a class to it.
<div style="margin: 10px 0px;"> <input type="text" class="fancy_effect1" value="effect 1"> </div>
Step 4 – Include this JS file before the end of the <body> tag.
Step 5 – Call the fancyInput() function with the desired effect number (from 0 to 4).
For a full page example with all the 5 effects view the demo or download the files.
– The plugin effects can be also applied to text areas.
– The plugin doesn’t support internet explorer browsers.
I hope you guyz like this simple plugin tutorial and please share this with your friends and write your reviews in comments.