x

Einloggen

Hast du noch keinen Account? Jetzt registrieren!

Über 20 geniale Effekte für Webdesigner mit jQuery

Ü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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit 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. 
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

5. Bubble Navigation
Bubble Navigation für jQuery erzeugt ein einfaches Menü, das sich blasenartig erweitert und dann alle Menüoptionen anzeigt.
Über 20 geniale Effekte für Webdesigner mit jQuery

6. Bessere Login-Formulare
In Login-Formularen werden oft redundante Informationen angezeigt – hier ein Plugin, das diese erst nach einem Mausklick offenbart.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

12. iCarousel
iCarousel zeigt eine Bildergalerie an, bei der die Bilder karussellartig weiterbewegt werden. Das lässt sich auch als einfacher Newsfeed verwenden.
Über 20 geniale Effekte für Webdesigner mit jQuery

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. 
Über 20 geniale Effekte für Webdesigner mit jQuery

14. Interactive Picture
Dieses Plugin ermöglicht interaktive Grafiken mit Tooltips und Pop-up-Fenstern, die bestimmte Grafikdetails genauer anzeigen.
Über 20 geniale Effekte für Webdesigner mit jQuery

15.jqFancyTransitions
jqFancyTransitions zeigt coole Überblendungseffekte innerhalb einer Slideshow und ist mit allen Browsern kompatibel.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery
19. Panning Slide
Panning Slide verwendet Fotos von Flickr und stellt daraus eine Slideshow zusammen.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery

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.
Über 20 geniale Effekte für Webdesigner mit jQuery
67484 Mal gelesen
+6
28. Mär 2011, 19:26

Kommentare

(1)
RSS
avatar
0
v x
Klener 28. Mär 2011, 20:17

Einfach nur verdammt gut die Sammlung!!! Vielen Dank, sowas würd' ich hier sehr gern öfters sehen! :-)
DANKE!


Kommentieren

Fett Kursiv Unterstrichen Durchgestrichen   Link Zitieren Code
Ich bin mit den Nutzungsbedingungen einverstanden.
Zukünftige Kommentare zu diesem Beitrag abonnieren (abbestellbar).
 
Bitte klicke jetzt auf den Bestätigungslink in deiner E-Mail.