Vorheriger Artikel Nächster 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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
7 Antworten
  1. von Suchandt am 26.02.2013 (09:20 Uhr)

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

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

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

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

    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!

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

    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.

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

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

    Ich finde den Effekt cool, ist mal erfrischend anders.

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

    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.

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

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS3
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

Inspiration: CSS-Ladebalken und -Animationen für dein Projekt
Inspiration: CSS-Ladebalken und -Animationen für dein Projekt

Zur Darstellung von Ladezuständen könnten ein einfaches „Lade“ oder eine Gif-Animation mit einem Ladebalken ausreichen. Mit CSS3 stehen aber weitere, optisch ansprechendere und … » weiterlesen

Magic kurz vorgestellt: Animate.css für Anwendungsentwickler
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler

Wir haben bereits über die CSS-Bibliothek animate.css berichtet. Wer noch mehr und vor allem andere Animations-Effekte benötigt, der sollte sich die Beta von Magic ansehen. » weiterlesen

Kennst Du schon unser t3n Magazin?

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