20+ Demos zeigen erweiterte JQuery-Effekte
Vor Kurzem war Flash eine der wichtigsten Technologien, mit denen Webdesigner eine Website interaktiv gestalten konnten.
Seit der Einführung des iPad mit dem Mangel an Flash Player gibt es eine Beschleunigung in der Welt der Web-Entwicklung, alternative Technologien wie Flash, wie jQuery, Ajax und andere zu verwenden.
Obwohl Flash immer noch ein sehr leistungsfähiges und nützliches Werkzeug ist, das in vielen Fällen gut funktioniert, können einige der Effekte, die Webdesigner normalerweise in Flash erstellen, mit jQuery genauso einfach implementiert werden.
Hier sind 21 Online-Demos, die die Leistungsfähigkeit von jQuery für die Entwicklung von erweiterten Effekten und Interaktivität zeigen, die mit Flash konkurrieren können.
1. Flip! Ein jQuery-Plugin
Diese Demo ahmt die beliebte Karten-Flip-Technik nach, die ein Element um 360 Grad um seine eigene X- oder Y-Achse drehen kann.
2. jQuery Quicksand-Plugin
Dies ist ein großartiges Plugin zum Sortieren eines Arrays von Elementen / Icons auf einer Seite mit netten Ein- / Ausblend- und Animationseffekten.
3. ImageFlow
Dieser Bildbetrachter ähnelt der Apple CoverFlow-Oberfläche, die in ihren verschiedenen Produkten und Anwendungen so bekannt geworden ist.
4. Erstellen Sie eine interaktive Karte mit jQuery anstelle von Flash
Diese Demo verbindet die Macht von jQuery mit Ajax, um wirklich eine ansprechende Oberfläche zu erstellen.
5. Slideout Tipps mit jQuery & CSS3
Durch Klicken auf die "+" Symbole werden zusätzliche Informationen mit einem netten, glatten Animationseffekt angezeigt.
6. Zoomer Galerie
In dieser Demo scheint es sich um eine normale statische Datei zu handeln Bildergalerie erhält zusätzliche Interaktivität durch Verwendung eines mehrschichtigen Zoom-Effekts, wenn Sie den Mauszeiger über ein Bild bewegen.
7. jQuery Circulate
Diese Demo zeigt den viel genutzten Flash-Effekt, mit dem ein Bild auf einer Seite eingekreist wird - alles mit jQuery.
8. Foto-Zoom-Out-Effekt
Diese Demo sieht täuschend einfach aus, aber bei weiterer Untersuchung werden Sie feststellen, dass die Komplexität des Zoom-Out-Effekts mehrere Ebenen umfasst.
9. Sliding Boxen und Beschriftungen mit jQuery
Hier erfahren wir, wie mit jQuery, einer Technik, die früher nur Flash-Entwicklern vorbehalten war, mächtige Übergänge erzeugt werden können.
10. CSS3 Lightbox Galerie
Dieses Plugin sieht so aus, als wäre es speziell für Social Media geschrieben. Durch Ziehen und Ablegen eines Fotos oben auf der "Freigabebox" wird ein modales Fenster geöffnet, das als Schnittstelle für den Aufruf einer API über AJAX dienen kann und es dem Benutzer ermöglicht, ein Foto auf Flickr, Twitter, Facebook und anderen Websites zu teilen.
11. Machen Sie einen Fotoshooßeffekt mit jQuery & CSS
Obwohl diese Demo auf den ersten Blick wie eine Augenweide aussieht, könnte sie ein sehr leistungsfähiges Werkzeug für die Arbeit mit großen Bildern sein, wenn sie mit AJAX oder HTML5 Local Storage gekoppelt ist.
12. Super Bubble Navigation
Hier nutzt der Entwickler Farbübergänge und Animationen, um ein sehr attraktives und interaktives Menü zu erstellen.
13. Schöne Hintergrundbildnavigation
In dieser Demo löst jede Benutzeraktion mehrere Übergänge aus, die alle dazu dienen, den Benutzer vollständig in die Schnittstelle einzutauchen.
14. AviaSlider
AviaSlider verwendet klassische Flash-ähnliche Übergangseffekte, um das Erscheinungsbild eines Standard-Slider-Interfaces zu verbessern.
15. Hintergrundbild Diashow
Animierte Hintergründe sind einer der Bereiche, in denen Flash früher im Webdesign dominierte. Hier ist ein Beispiel, das stattdessen jQuery verwendet.
16. Schwenken Diashow
Eine weitere einzigartige Version der typischen Diashow-Oberfläche. Hier fügt der Autor eine Diagonalnavigation hinzu, um die Oberfläche aufzupeppen und hervorzuheben.
17. jqFancyTransitions
Dieses Plugin kann verwendet werden, um Ihre Fotos als Diashow mit ausgefallenen Flash-ähnlichen Übergangseffekten anzuzeigen.
18. iCarousel - Schieberegler für horizontale Bilder
Eine weitere Slideshow, die nur einen Hauch von Erleichterung bietet, um die Übergänge wirklich hervorzuheben. Es ist kein Wunder, dass sie in dieser Demo sexy Mac-Produkte präsentieren wollten.
19. Erstellen eines interaktiven Bildes mit jQuery
Diese Demo kann verwendet werden, um Websites zu nutzen, auf denen viel Platz auf dem Bildschirm ist. Ein Klick auf einen Bereich der Website zeigt eine modale Box, die mehr Informationen über den angeklickten Bereich anzeigt.
20. Wolken Zoom
Ein Plugin, das so aussieht, als ob es mit eCommerce entworfen wurde. Cloud Zoom ist einfach zu implementieren und kann die Benutzererfahrung wirklich verbessern.
21. Apple-ähnlicher Retina-Effekt
Jeder, der ein iPhone, einen iPod touch oder ein iPad verwendet, kennt die "Retina-Ansicht", die einen kleinen Bereich auf dem Bildschirm vergrößert, wenn Sie den Bereich für längere Zeit berühren. Diese Demo implementiert diesen Effekt für den Desktop.
Kompiliert exklusiv für WDD durch Kalim Flotte . Er ist ein professioneller Webdesigner und Blogger mit über 6 Jahren Erfahrung. Das Internet ist seine Leidenschaft, da er seine Zeit zwischen Blog-Schreiben, Software-Entwicklung und Social Media aufteilt. Er liebt es, neue Anwendungen für das Web, Mobile und Desktop zu verwenden und zu entwickeln.
Kennen Sie andere großartige Beispiele für jQuery-Effekte, die mit der Macht von Flash konkurrieren können? Würden Sie jQuery-Effekte über Flash vorschlagen, wenn Ihre Kunden sie anfragen? Bitte teilen Sie Ihre Ansichten und Beispiele unten!