Interactive Webdesign with CSS and jQuery

CSS and jQueryDas man mit CSS nahezu alle Ansätze eines Screendesigns umsetzen kann ist nichts neues und auch das dank CSS3 einzelnen HTML-Elementen "Leben in Form von Bewegung" eingehaucht werden kann. Da diese zugegebenermaßen nicht unbedingt alltagstauglichen Animationen zudem nur in einem Browser funktionieren, gibt es dank dem JavaScript-Framework jQuery und den zahlreichen Plugins die täglich durch kreative Köpfe entstehen, zahlreiche Alternativen. Die folgende kleine Auflistung präsentiert daher heute "Elemente mit Bewegung", basierend auf CSS & jQuery.

Toggle with CSS & jQuery
Toggle with CSS and jQuery

Smart Columns with CSS & jQuery
Smart Columns

Fade in - Fade out
Fade in - Fade out

Newsticker made by CSS and 10 lines of jQuery
Newsticker made by CSS and jQuery

CSS Dock Menu
CSS Dock Menu

How to Make a Smooth Animated Menu with jQuery
Animated Menu

Targeting Advanced Elements in jQuery
Targeting Advanced Elements in jQuery

Page Peel Effect with jQuery & CSS
Page Peel Effect

jBreadCrumb
jBreadCrumb

CSS Gradient Text Effect
Gradient Text Effect

Wer auch diesmal weitere interessante jQuery-Anwendungsbeispiele ( für togglen, faden, sliden ) kennt und sie mit anderen teilen möchte, ist hiermit dazu aufgerufen den entsprechenden Link im Kommentarbereich zu kommunizieren.

Ähnliche Artikel zu diesem Thema:
  1. Martin
    02 Jun 2009, 13:03

    Danke für die ständige Erinnerung, daß ich mich endlich mal damit beschäftigen sollte. "Toogle" würde ich sicher häufig einsetzen..


  2. Marvin
    03 Jun 2009, 12:38

    Oh man, die Smart Coloums sind echt richtig cool! Auch wenn die für mich nicht in Frage kommen, da ich eh immer nur fixe Layouts bastle. Aber sehr kreativ und gute Umsetzung! Der Toggle (Accordion) ist ja allseits bekannt, aber auch nicht mehr wegzudenken.

    Hättest noch einmal Tabs mitreinhemen können. Trotz alledem, schicke Liste hier.


  3. Alexandra
    04 Jun 2009, 08:06

    Sooo... habe schon lange nichts mehr von mir hören / lesen lassen, aber manchmal reicht es eben "nur" zum lesen :D

    Jedenfalls tolle Kurzübersicht...
    jQuery interssiert mich schon länger... muß das einfach mal nebenbei ausprobieren :)
    Das läuft vermutlich so: Einmal getestet und nie mehr missen wollen... oder?

    Grüße und weiter machen :)
    Alexandra


  4. Webagentur 04 Jun 2009, 11:15

    Wow, da sind ja einige interessante Navigation dabei ... Ich werde sie mir mal genauer anschauen.


  5. Jürgen Liechtenecker
    04 Jun 2009, 11:29

    Es ist aber auch immer eine Gratwanderung zwischen Verspieltheit und echter Usability. Dynamische JS Elemente sollten die Benutzbarkeit erhöhen.

    Ansonsten sind schon geile Effekte dabei, das Dock Menu gefällt mir besonders.


  6. Michael
    04 Jun 2009, 22:55

    Das Konzept "Simple Toggle with CSS & jQuery" kann man sicher sehr gut für eine Mini-Site verwenden. Kommt immer drauf an ob es passt und die Effekte die Usability erhöhen.

    Wie die anderen hier auch, nehme ich mir jetzt auch endlich vor jQuery ernsthaft zu lernen ;)


  7. Mannfred
    06 Jun 2009, 16:49

    Das ist ja mal wirklich richtig klasse... Jetzt wird es Zeit, damit ich mich endlich auch mal damit intensiv beschäftige...


  8. Johnny
    07 Jun 2009, 19:35

    jQuery ist echt super, da habe ich mich schnell zurecht gefunden obwohl ich vorher mit Javascript eigentlich nicht viel zu tun gehabt habe.
    Kann man schnell beeindruckende Effekte erziehlen.


  9. Mark 25 Aug 2009, 15:34

    Hallo,

    schöne Gallerien bekommt man auch auf http://www.flashdevelopment.de im Internet. Da gibt es zwar keine jQuery Gallerien, aber dafür professionelle Flash Komponenten.

    Viele Grüße
    Mark


  10. Thomas
    20 Okt 2009, 23:23

    Also ich habe bisher ungern Javascript odere andere zusätzliche Plugins verwendet, wenn ich mir das aber so ansehe werde ich wohl mal umdenken müssen. Da kann man richtig leckere Sachen machen.


  11. Janine 17 Nov 2011, 19:50

    Der Artikel ist ja nun schon etwas älter. Es hat sich Einiges getan. Vor allen Dingen die jQuery UI ist ein sehr feines Zusatzpaket, mit dem sich noch mehr Oberflächen gestalten lassen.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage