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

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>

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: 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.