Fancy Input: jQuery-Plugin für CSS3-Effekte in Textfeldern

Formulare sind langweilig. Fancy Input macht Eingabefelder optisch ansprechend und versieht sie mit CSS3-Effekten und Animationen. Ist dieses jQuery-Plugin ein Must-Have oder reine Spielerei?

Das Ausfüllen von Formular-Feldern ist meistens keine sonderlich spannende Aufgabe. Mit Fancy Input werden Formularfelder auf jeden Fall deutlich unterhaltsamer. Das experimentelle jQuery-Plugin bringt CSS3-Effekte in Textfelder und bietet so einen unerwarteten und beeindruckenden Effekt.

Fancy Input benutzen

Der Einsatz des Skriptes ist sehr einfach. Mit dem unten stehenden Code erzeugt ihr ein Eingabefeld mit dem Standard-Effekt von Fancy Input.

<div><input type='text' /></div>
<script>$('div > input').fancyInput();</script>

fancy input1 Fancy Input – Effekt 1

In der aktuellen Fassung unterstützt das Plugin fünf verschiedene Text-Effekte, die über Hinzufügen der Klassen „effect2“-„effect5“ im übergeordneten div-Element aktiviert werden können.

<div class="effect3"><input type='text' /></div>
<script>$('div > input').fancyInput();</script>

fancy input 3 Fancy Input – Effekt 2

Fancy Input: Brauchen wir das wirklich?

Fancy Input bringt zwangsläufig die Frage nach dem tatsächlichen Nutzen mit sich. Muss sich wirklich alles auf einer Webseite bewegen, hüpfen, leuchten oder in irgendeiner anderen Form auf sich aufmerksam machen? Muss man heutzutage noch zeigen, was alles möglich ist, oder sollte man sich vielleicht doch lieber auf die wirklich wichtigen Bestandteile des Projektes konzentrieren?

Mit den zunehmenden Möglichkeiten für Webworker stehen wir vor der großen Herausforderung das „Over-Doing“ zu vermeiden. Eine Phase, die wir schon mit Flash erleben mussten und hoffentlich bald komplett hinter uns lassen können. Mit Tools wie Adobe Edge Animate wird die Erstellung solcher Animationen deutlich vereinfacht, so dass es an uns liegt zu entscheiden, wie wir diese Möglichkeiten einsetzen.

Das von Yair Even-Or entwickelte Plugin ist auf jeden Fall einen Blick wert und zeigt wieder einmal, wie viel Potenzial die aktuellen Web-Technologien haben. Eine Live-Demo und den Download zum Plugin findet ihr auf der Webseite von Fancy Input. Derzeit läuft Fancy Input in allen aktuellen Browsern mit CSS3-Untersützung außer dem Internet Explorer.

via t3n News http://t3n.de/news/fancy-input-jquery-plugin-445224/?utm_source=feedburner+t3n+News+12.000er&utm_medium=feed&utm_campaign=Feed%3A+aktuell%2Ffeeds%2Frss+%28t3n+News%29

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s