Drücke die Tasten ◄ ► für weitere Artikel  

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?

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>

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

49 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
7 Antworten
  1. von Suchandt am 26.02.2013 (09:20Uhr)

    Für ein alleinstehendes Loginformular vielleicht ganz nett, aber für seriöse Formulararbeit wirklich unangebracht.

  2. von blablub am 26.02.2013 (10:36Uhr)

    Wer zum Teufel braucht sowas? Welchen Sinn/Zweck hat das? Immer dieses sinnloses CSS3-jQuery Gedöns das dem User genau 0,0 bringt.

  3. von robbz am 26.02.2013 (11:24Uhr)

    Lieber blablub: Nur weil DU nicht weißt was man damit anfangen könnte, heißt das nicht, dass es niemanden sonst gibt.
    Ich persönlich brauch es auch nicht unbedingt, aber mir fallen sofort einige Anwendungsfälle ein, wo das hier echten Sinn macht (abhängig von der Zielgruppe natürlich).

    Einfach mal nicht immer motzen, sondern Experimentieren und Spielen und Ausprobieren!

  4. von mcnesium am 26.02.2013 (14:26Uhr)

    oha, das sieht zwar schick aus, auf nem android-gerät funktionierts aber überhaupt nicht, weder chrome, noch firefox, der android-browser kann nicht mal die schrift richtig anzeigen. würde mich wundern, wenns bei iOS anders aussieht, von windows mobile mal ganz zu schweigen. solange das also nicht überall funktioniert, kann man es in produktivumgebungen sowieso nicht einsetzen.

  5. von Timo am 26.02.2013 (14:31Uhr)

    @blablub
    Früher war alles besser, oder? ;)

    Ich finde den Effekt cool, ist mal erfrischend anders.

  6. von Vielhuber David am 01.03.2013 (08:48Uhr)

    Die Performance bricht (wenn in Textarea benutzt) in der 4-5 Zeile ein -
    trotzdem finde ich durchaus, dass das Plugin für einzeilige,
    kurze Eingaben ein gelungener Eyecatcher sein kann.

  7. von mediajunky am 25.03.2013 (15:28Uhr)

    Ganz nette Effekte, wird für mich auf Websites aber kein must-have ...

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration
Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration

Wir zeigen euch, wie ihr die Hardware-Acceleration mit CSS3 aktivieren könnt um eure Web-Projekte, zum Beispiel auf Smartphones, schneller laufen zu lassen. » weiterlesen

WOW.js: Scroll-Activated-Animations mit Animate.css
WOW.js: Scroll-Activated-Animations mit Animate.css

Scroll-Activated-Animations entwickeln sich zu einem Trend in der Web-Entwicklung. Mit dem WOW.js-Skript sparst du dir bei der Erstellung solcher Webseiten eine Menge Arbeit. » weiterlesen

CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch

CSS Diner ist ein kleines Spiel, bei dem ihr mit CSS-Selektoren verschiedene Elemente aus einer interaktiven Grafik auswählen müsst. In diesem Artikel zeigen wir euch, warum dieses Spiel nicht... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen