Über 20 geniale Effekte für Webdesigner mit jQuery

Wie jedes neue Entwicklerwerkzeug für Webdesigner wird auch jQuery gerne und häufig mit seinen Vorgängern und Konkurrenten verglichen, und das ist natürlich an erster Stelle Flash. Ein Vergleich allerdings, den jQuery durchaus nicht zu scheuen braucht. Flash war lange Zeit das Mittel der Wahl, doch nun ist es an jQuery, den Webseiten der Welt Spezialeffekte oder Interaktivität zu verleihen. Denn gegenüber Flash erleichert jQuery die Realisierung ausgefallener Effekte und Animationen ungemein und hat auch die Nase vorn, wenn es um Suchmaschinenoptimierung geht. Und was da alles geht mit jQuery: Grafiken verschieben und übereinanderlagern, flüssigere Animationen, Fotos zoomen und verschieben, Schnappschuss- und Slider-Effekte und noch viel mehr.Für einen ersten Eindruck, was jQuery alles kann, habe ich eine Liste mit Plugins für jQuery zusammengestellt — inklusive Links zu den jeweiligen Demo-Webseiten.

1. Retina Effect
Einen vom iPhone bekannten Lupeneffekt erzeugt dieses Plugin für jQuery und CSS. Es zeigt an der Position des Mauszeigers einen vergrößerten Ausschnitt der darunterliegenden Grafik.


2. Aviaslider
AviaSlider kombiniert Slideshowfunktionalität mit einer Reihe von Überblendungseffekten. Das Plugin lädt die Bilder im Hintergrund, hat Autoplay- und Stop-Funktionen, unterstützt Links in Bildern und läuft bei nur 8 KB Größe auch mit älteren Versionen von jQuery.


3. Beautiful Background Image Navigation
Mit diesem Plugin lassen sich dreiteilige Menuüs erstellen. Jeder Menüpunkt hat ein eigenes Hintergrundbild, das eingeblendet wird, sobald der Mauszeiger darüber verweilt. 


4. Background Image Slideshow
Dieses Plugin bringt Webseiten Slideshow-Funktionen mit großformatigen Hintergrundbildern, wechselndem Text und Steuerungsschaltflächen. Es gründet auf jQuery in Verbindung mit CSS. Der Durchsichteffekt der Menüs und Texthintergründe wird mit transparenten PNG-Grafiken erzeugt.


5. Bubble Navigation
Bubble Navigation für jQuery erzeugt ein einfaches Menü, das sich blasenartig erweitert und dann alle Menüoptionen anzeigt.


6. Bessere Login-Formulare
In Login-Formularen werden oft redundante Informationen angezeigt – hier ein Plugin, das diese erst nach einem Mausklick offenbart.


7. Carrot Creative
Carrot Creative zeigt eine Reihe von Bildern als Slideshow an und wechselt automatisch nach einiger Zeit zum nächsten Bild – also zurücklehnen und genießen.


8. Circulate
Circulate lässt Bilder auf der Webseite umherwirbeln – einfach ein kleines Codefragment einfügen, um Bilder zum Rotieren zu bringen. Erforderlich sind die jQuery-Bibliothek und Easing als weiteres Plugin.


9. Cloud Zoom
Ein Plugin für Zoomeffekte. Cloud Zoom zeigt den Teil eines Bildes vergrößert an, über dem der Mauszeiger liegt. Ein sehr kleines Plugin und mit vielen Browsern kompatibel.


10. Flip Box
Flip dreht Elemente dreidimensional in 4 verschiedene Richtungen (oben, unten, links, rechts). Der Code unterstützt Callback-Funktionen und ist wie bei allen Plugins sehr klein.


11. Schwebende Bildergalerie
Die hier gezeigte schwebende Bildergalerie verwendet die neuesten Techniken aus jQuery und CSS. Sie durchsucht einen Bildordner und erzeugt daraus eine Bildergalerie mit Drag-and-Drop-Funktionalität. Suchmaschinenfreundlich und mit vielen Browsern kompatibel.


12. iCarousel
iCarousel zeigt eine Bildergalerie an, bei der die Bilder karussellartig weiterbewegt werden. Das lässt sich auch als einfacher Newsfeed verwenden.


13. Imageflow
Imageflow ist eine weitere Javascript-Bibliothek, die Bilder karussellartig anzeigt — neben dem aktuellen Bild ist auch das Vorherige und das Nächste sichtbar. 


14. Interactive Picture
Dieses Plugin ermöglicht interaktive Grafiken mit Tooltips und Pop-up-Fenstern, die bestimmte Grafikdetails genauer anzeigen.


15.jqFancyTransitions
jqFancyTransitions zeigt coole Überblendungseffekte innerhalb einer Slideshow und ist mit allen Browsern kompatibel.


16. jQuery DJ Hero 
Basiert auf dem Spiel jTypingHero, das deine Tippfähigkeiten testet – dieses Plugin verwendet jQuery und CSS3, um bis zu 4 Schallplatten darzustellen, die man drehen und scratchen kann.


17.jQuery-Plugin für interaktive Karten
Ein jQuery-Plugin für zoombare und interaktive Karten, das in diesem Beispiel verwendet wurde, um wichtige meereskundliche Informationen innerhalb von North Carolina in Kartenform zu veranschaulichen. Mit jQuery waren Aufbau, Animation und Darstellung der Karte sehr einfach.


18. jSlickmenu
Dieses Plugin erzeugt schicke Menüs durch die Kombination von jQuery mit einigen Features von CSS3 wie Rotation und Schatten. Es ist einfach zu verwenden und leicht anpassbar, und funktioniert auch auf Safari und Chrome.

19. Panning Slide
Panning Slide verwendet Fotos von Flickr und stellt daraus eine Slideshow zusammen.


20. PhotoShoot
Mit PhotoShoot erzielt man eine Art Schnappschuss-Effekt. Es wird eine Kamera simuliert, mit der Schnappschüsse des Hintergrundbilds aufgenommen werden können.


21. Quicksand
Quicksand sortiert eine Reihe von Elementen nach verschiedenen Kriterien in einer ansprechenden Sortieranimation. Im Demobeispiel lassen sich Anwendungen und Tools — entweder nach Name oder Größe — getrennt voneinander sortieren.


22. Contextual Slide out Tips
Dieses auf jQuery und CSS3 aufbauende Plugin ist ideal für Produktseiten, die einerseits kompakt sind, aber auch zusätzliche Informationsebenen enthalten sollen. Jeder Menüpunkt kann in vier Richtungen erweitert werden und das in allen drei Primärfarben.


23. Sliding Boxes
Dieses Plugin zeigt Bilder mit Beschriftungen und Effekten. Lässt man im Beispiel den Mauszeiger über der jeweiligen Stelle, erhält man Informationen über den jeweiligen Künstler und seine Werke.


24. Zoomer Gallery
Zoomer Gallery zeigt Bilder mit ähnlichen Zoom-Effekten an, wie man sie von Flash her kennt. Dieses Plugin ist mit nur 2 KB sehr kompakt.