22 brillante jQuery-Plugins

Es wurden Zehntausende von jQuery-Plugins für die jQuery-Bibliothek geschrieben. Die jQuery-Bibliothek wurde 2006 von John Resig erstellt und ist eine der beliebtesten JavaScript-Bibliotheken. Es ist eine fantastische Ressource zum schnellen Entwerfen und Entwickeln von Benutzerinteraktionen. Unabhängig davon, ob es sich um eine Bildergalerie oder ein Formular, eine inhaltliche CSS-Animation oder einen Explosionseffekt handelt, bietet die Bibliothek die Kernbausteine, um Ihnen ein schnelles Prototyping zu ermöglichen und eine einzigartige Benutzeroberfläche mit minimalem Code und Aufwand bereitzustellen.

Nur weil Sie für jedes Problem eine eigene Lösung erstellen können, heißt das, dass Sie dies tun sollten? Natürlich nicht! Es ist absolut nicht erforderlich, das Rad jedes Mal neu zu erfinden, wenn Sie ein paar gemeinsame Funktionen erstellen möchten. Verwenden Sie Plugins, um sofort ein Verhalten hinzuzufügen. Auf diese Weise sparen Sie noch mehr Zeit und Mühe. Unten finden Sie eine Liste nützlicher jQuery-Plugins. Die meisten sind auch kostenlos.



Weitere nützliche Ressourcen für das Webdesign finden Sie in unserer Liste der besten Webdesign-Tools , besten JavaScript-APIs und unsere Auswahl der beste JavaScript-Frameworks berücksichtigen.



01. CZM Social Chat Unterstützung

jquery Plugins

Fügen Sie Ihrer Site ganz einfach Chat-Plugins hinzu(Bildnachweis: CzMMedia)
  • Hier herunterladen

Mit diesem JQuery-Plugin für die Unterstützung sozialer Chats können Sie unbegrenzte soziale Konten wie WhatsApp, Messenger, Skype, Twitter, Telegramm und Instagram unterstützen. Es ist einfach einzurichten und Sie können die Schaltflächen nach Ihren Wünschen anpassen. Im Gegensatz zu den meisten Plugins in dieser Liste ist der Download nicht kostenlos und kostet 9 US-Dollar.



02. RTO + P Video Player

jQuery-Plugins: RTO + P Video Player

Erstelle deinen eigenen Videoplayer, anstatt dich auf YouTube-Einbettungen zu verlassen(Bildnachweis: RTO + P)

Sicher, es ist einfach, Videos von YouTube oder wo auch immer einzubetten, aber wenn Sie etwas mehr Kontrolle über Ihr Video haben möchten, ist RTO + P Video Player ein Muss. Es macht es einfach, Ihren eigenen Videoplayer zu erstellen und anzupassen, der sein Video entweder von Ihrem eigenen Server oder CDN oder von einem öffentlichen Vimeo-Stream erhält. Verwenden Sie das HTML5-Video-Tag, um das Leben zu vereinfachen, oder verwenden Sie für eine bessere Leistung die Option zum verzögerten Laden.

03. Slick

jQuery-Plugins: Slick



Welches Karussell Sie auch brauchen, machen Sie es mit Slick(Bildnachweis: Ken Wheeler)

Ist dies das letzte Karussell, das Sie jemals brauchen werden? Es könnte sicherlich sein; Slick ist ein jQuery-Plugin, mit dem Sie auf nahezu alle Arten von Karussells reagieren können, die Sie sich nur wünschen können. Sie können mit allen möglichen Optionen spielen, darunter Lazy Loading, Autoplay, Rückrufe und mehr.

04. Die Mauer

jQuery-Plugins: Wall

Die flexiblen Layouts von Muuri sind reaktionsschnell, sortierbar, filterbar und ziehbar

Für ein Höchstmaß an flexiblen Layouts ist Mulas von Niklas Rämö einen Blick wert. Das Layoutsystem ermöglicht es Ihnen, Rasterelemente in verschiedenen Größen auf nahezu jede erdenkliche Weise in einem Container zu positionieren. Es ist reaktionsschnell, sortierbar, filterbar und ziehbar. Standardmäßig wird alles so angeordnet, dass es zuerst passt. Sie können jedoch Ihren eigenen Layoutalgorithmus für einen anderen Layoutstil hinzufügen.

05. Timeline.js

timeline.js

Timeline macht genau das, was es verspricht, und erstellt einen Timeline-Schieberegler

Dieses jQuery-Plugin bietet eine Variante der Karussellkomponente: Timeline.js bietet Ihnen alles, was Sie zum Erstellen einer Karussell-Timeline benötigen (d. H. Einen Schieberegler, der anhand chronologischer Punkte fortschreitet). Es enthält zahlreiche visuelle und funktionale Anpassungsoptionen.

06. Schrägseitiger Bildlauf

gekippter Seitenlauf

Der geneigte Seitenlauf verleiht Ihren Seiten einen ordentlichen 3D-Effekt

Dieses Plugin von Pete R. ist eine hervorragende Möglichkeit, die Aufmerksamkeit der Leute auf sich zu ziehen und Ihrer Website ein wenig mehr Tiefe zu verleihen. Wenn es installiert ist, werden Elemente beim Scrollen auf der Seite in die Ansicht und beim Scrollen vom oberen Rand der Seite erneut gekippt. Es ist ein großartig aussehender Effekt, der schön und einfach zu implementieren ist.

07. Fokuspunkt

Focuspoint JQuery Plugin

Verabschieden Sie sich von schlecht beschnittenen reaktionsschnellen Bildern

Das Tolle an Responsive Web Design ist, dass Sie eine einzelne Seite erstellen können, die auf jedem Gerät gut aussieht. Wenn Ihre Site jedoch Bilder automatisch zuschneidet, um sie an bestimmte Ansichtsfenster anzupassen, kann sie häufig den Fokus verlieren. Mit Focuspoint können Sie sicherstellen, dass Ihr Bild in jedem Container gut aussieht, indem Sie für jedes Bild einen Brennpunkt angeben. Das Plugin schneidet unerwünschte Teile vor den wichtigen Elementen aus.

08. SVGMagic

SVGMagic jquery Plugin

Nintendo-Spiel und beobachten Esel Kong
SVGMagic erstellt PNGs, um SVGs zu ersetzen, wenn sie nicht unterstützt werden

Die Verwendung von SVG-Bildern ist eine gute Idee, da sie in jeder Größe scharf aussehen. Mit diesem Plugin können Sie dies tun, ohne sich um Browser kümmern zu müssen, die sie nicht unterstützen. Es sucht nach SVG-Bildern und ersetzt sie durch PNG-Versionen, wenn SVG nicht unterstützt wird.

09. Gesichtserkennung

JQuery-Plugin zur Gesichtserkennung

Dieses Plugin bietet eine einfache Möglichkeit, leistungsstarke Technologien zu verwenden

Erkennen und ermitteln Sie die Koordinaten menschlicher Gesichter in Bildern, Videos und Leinwänden mit diesem Plugin, das von Jay Salvat geschrieben wurde und den Gesichtserkennungsalgorithmus von Liu Liu verwendet.

10. Runder Schieberegler

rounderslider jQuery Plugin

Der Schieberegler kann entsprechend Ihren Zwecken thematisiert werden

Mit diesem kreisförmigen Schieberegler kann der Benutzer einen Wertebereich auswählen, indem er mit der Maus über den Kreis fährt. Der vollständige Schieberegler ist die Standardeinstellung. Sie können ihn jedoch auch zum Abrufen von Viertelkreis-, Halbkreis- und Kreisformen verwenden. Es gibt CSS-Stile, die Sie anpassen können, um sie auf verschiedene Arten zu thematisieren, z. B. um wie ein Tacho auszusehen. Es sind keine Bilder beteiligt; Es ist alles mit CSS und JavaScript gemacht.

11. jInvertScroll

jinvertscroll jQuery Plugin

Erhalten Sie mühelos einen Parallaxeeffekt

Mit jInvertscroll ist es einfach, horizontales Scrollen mit Parallaxeeffekt zu implementieren. Rollen Sie Ihr Scrollrad auf der Demo-Site, um seitwärts zu sausen, während sich zwei Landschaftsebenen mit unterschiedlichen Geschwindigkeiten bewegen, um eine Illusion von Tiefe zu erzeugen.

12. Slinky

jQuery-Plugins: Slinky

Ein Menü-Design, das nicht aus der Mode kommt?

Slinky ist ein elegantes, zeitloses Menüdesign, das für jedes Szenario nützlich ist, in dem Sie viele Untermenüs haben. Wählen Sie ein Element aus und eine Animation verschiebt das Untermenü. Es gibt eine Demo Hier .

13. Zwanzigundzwanzig

jQuery-Plugins: TwentyTwenty

Mit dem ZURB-Plugin können Sie Bilder vergleichen

Anstatt zwei Bilder nebeneinander zu platzieren, um die Unterschiede zwischen ihnen zu zeigen, können Sie dieses Plugin verwenden, das eines übereinander platziert. Benutzer ziehen einen Schieberegler so, dass das untere Bild durchscheint, sodass sie sehen können, was sich in einer Vorher-Nachher-Situation geändert hat.

14. Hierarchische Anzeige des Materialdesigns

jQuery-Plugins: hierarchische Anzeige

Animationen können helfen, die Aufmerksamkeit der Benutzer zu lenken

Hierarchische Anzeigeanimationseffekte können verwendet werden, um die Aufmerksamkeit der Benutzer zu lenken und sie in einem Prozess von einem Punkt zum nächsten zu führen. Diese Animation kann an Ihr Design angepasst werden und verfügt über eine hervorragende Dokumentation, die Sie zum Laufen bringt.

15. Tabslet

jQuery-Plugins: Tablset

Minimalistisches Tab-Design

Wie der Name schon sagt, ist Tabslet ein leichtes Plugin zum Erstellen von Tabs. Es unterstützt nächste / vorherige Steuerelemente, Rotation, benutzerdefinierte Ereignisse, Deep Linking und viele andere nützliche Funktionen. Schau es dir an die Demo um zu sehen, ob es Ihren Bedürfnissen entspricht.

16. nanogallery2

jQuery Plugin nanoGALLERY

Eine voll ausgestattete, schnelle Bildergalerie

nanogallery2 wurde entwickelt, um Ihre Bildergalerien zu vereinfachen und bietet mehrstufige Navigation in Alben, Leuchtkästen, kombinierbare Hover-Effekte auf Miniaturansichten, Diashow, Vollbild, Paginierung und verzögertes Laden von Bildern. Es ist berührungsempfindlich, reaktionsschnell, schnell und unterstützt Cloud-Speicher.

Version 2 bietet eine verbesserte Benutzererfahrung und neue Funktionen wie das Filtern nach Schlüsselwörtern, einen Warenkorb, Social Sharing, erweiterte Hover-Effekte, Übergänge bei der Miniaturansicht, eine Infoseite mit Google Maps-Standort und vieles mehr.

wie man Videos in Photoshop umkehrt

17. Tooltipster

jQuery Plugin Tooltipster

Ausgefallene Tooltips mit Tooltipster

Tooltipster ist eine moderne Version des klassischen Tooltips, mit dem Sie vollständig HTML-fähige Tooltips in semantischem Markup mit CSS zur Steuerung der Anzeige präsentieren können. Es gibt eine Vielzahl von Konfigurationsoptionen, die es für jedes Szenario anpassbar machen.

18. Großartiges Popup

jQuery Plugin Magnific Popup

Ein leichter, performanter Leuchtkasten

Dies ist ein Lightbox-Plugin für jQuery, das sich darauf konzentriert, so leicht und kompatibel wie möglich zu sein. Der Entwickler hat sich auf Leistung und Benutzererfahrung konzentriert, verfügt also nicht über alle Funktionen alternativer Lightbox-Plugins, ist jedoch superschnell und funktioniert perfekt auf einer Vielzahl von Geräten, einschließlich Geräten mit hoher DPI (Retina) wie z das MacBook Pro.

19. jQuery Knob

jQuery Plugin Knob

Berührungsfreundliche Wählscheiben, die auch auf dem Desktop funktionieren

jQuery Knob nimmt Eingabeelemente auf und konvertiert sie in berührungsfreundliche Wählscheiben, die auch auf dem Desktop funktionieren. Dies ist ein hervorragendes Beispiel dafür, wie Sie Ihre Inhalte an neue Paradigmen anpassen können, und es lohnt sich, einen Blick auf den technischen Ansatz zu werfen, wenn nichts anderes.

20. Typeahead.js

jQuery-Plugin Typeahead

Praktisches Tool zur automatischen Vervollständigung, das vom Entwicklerteam von Twitter entwickelt wurde

Type Ahead, das Produkt des Entwicklungsteams von Twitter, ist ein einfach zu implementierendes Tool, das von einer lokalen oder externen Datenquelle abgerufen wird, während Ihr Benutzer in ein Eingabefeld eingibt, und dabei Vorschläge zur automatischen Vervollständigung bereitstellt.

21. Lettering.js

jQuery Plugin Schriftzug

Erhalten Sie eine genaue Kontrolle über Ihren Typ

Lettering.js bietet eine detaillierte Kontrolle über einzelne Zeichen in Ihrem Typ, sodass Sie Kerning anwenden, einzelne Buchstaben einfärben und Ereignis-Listener anwenden können. Es funktioniert auch gut mit FitText (unten) und gibt Ihnen die Kontrolle über Ihre Typografie im Desktop-Stil, während Sie gleichzeitig reaktionsschnell bleiben.

22. FitText

jQuery Plugin FitText

Skalieren Sie Ihren Text automatisch für reaktionsschnelle Überschriften

Mit diesem praktischen Plugin können Sie die Breite Ihres Containers mit Ihrem Typ füllen, aber die Textgröße automatisch nach oben oder unten skalieren. Das Plugin wurde entwickelt, um reaktionsschnelle Überschriften zu ermöglichen. Es lässt sich auch in Lettering.js integrieren, um ein detailliertes Styling pro Zeichen zu ermöglichen.

Zum Thema passende Artikel: