A Composite Textbox Effects Plugin: FancyText

Adding animation effects has never been so easy like it is now a day. You don’t need to learn flashy action script that somehow hard to embrace for hardcore programmers. With the advent of jQuery, the animation is now very much within reach of even novice programmers. Anyone can author reusable animation scripts called “plugins” with a trivial amount of knowledge about animation techniques.

 

The web or the internet has moved far from its original design, as its user base increased so does the demand for being more intuitive and fast. Design trends change from plain old HTML websites to interactive websites with animated banners build using Flash and other similar technologies. That required extra plugins to be installed on the client browser, which not recommended due to the excessive use of mobile devices. The problem solved by light weight CSS3, which is directly built into all the modern browsers. CSS3 follows very intuitive and descriptive syntax for animations and other transitions.

Today’s freebie is a combination of jQuery and CSS3 animations we call it FancyText. FancyText is a text box plugin that automatically converts standard HTML input element to an animation composite control, with lots of transitions to choose.

USING FANCYTEXT

Using FancyText is very simple, add input controls to your HTML document and provide customization via custom attributes and call the FancyText initializer function.

Make sure to add the following references in the head section.

• Add a reference to latest jQuery script
• Add a reference to jquery.fancy-textbox.js file
• Add a reference to jquery.fancy-textbox.css file
• Add a reference to font-awesome.css file

Note: Font Awesome is required for a text box with icons.