t3n News Entwicklung

14 JavaScript-Funktionen und jQuery-Plugins für praktische Features und schicke Effekte

14 JavaScript-Funktionen und jQuery-Plugins für praktische Features und schicke Effekte

Fast täglich werden neue JavaScript-Bibliotheken und -Plugins veröffentlicht. Einige nützliche Helfer und Effekte haben wir in diesem Artikel zusammengetragen.

14 JavaScript-Funktionen und jQuery-Plugins für praktische Features und schicke Effekte

Gridstack.js

Gridstack jQuery
Mit Gridstack erstellst du dragbare und flexible Layouts. (Screenshot: t3n)

Gristack ist ein jQuery-Plugin für Widget-Layouts. Damit kannst du beispielsweise Dashboards mit verschieden großen Kacheln anlegen. Diese lassen sich per Drag & Drop beliebig verschieben und in ihrer Größe verändern.

Midnight.js

Midnight.js jQuery Plugin
Mit midnight.js realisierst du fixierte Header, die sich je nach Scrollposition des Browsers anpassen. (Screenshot: t3n)

Midnight.js ist ein jQuery-Plugin für Onepager-Seiten, die unterschiedlich gestylte Header benötigten. Lege einfach deinen Standard-Header fest und definiere dann mit dem Data-Attribut „data-midnight“, welche CSS-Klasse der Header erhalten soll, sobald er das Element mit dem Attribut beim Scrollen erreicht. Das Aussehen der Header steuerst du dann ganz einfach im CSS.

Animsition

Animsition
Mit Animsition verpasst du deiner Seite coole Übergänge. (Screenshot: t3n)

Animation ist ein jQuery-Plugin für animierte Übergänge zwischen Unterseiten. Was früher ziemlich nervig wirken und nur durch einige Browser dargestellt werden konnte, kann jetzt dank Animation und CSS-Animationen spielend leicht für alle aktuellen Browser implementiert werden – und das mit insgesamt 58 verschiedenen Animationen auch noch ziemlich schick.

Material Design Preloader

Material Design Preloader
Der Material Design Preloader weist deine Besucher subtil auf einen Ladevorgang hin. (Screenshot: t3n)

Deine WebApp lädt im Hintergrund Daten nach? Mit dem Material Design Preloader kannst du die Ladezeit optisch aufwerten. Das kleine jQuery-Plugin lässt dich eine Preload-Animation auf den Bildschirm zaubern, die du innerhalb deiner eigenen Programmlogik starten und stoppen kannst.

Youtube Background Video

jQuery Youtube Background Video
Mit jquery Youtube Background Video verpasst du deinen Seiten schicke Videohintergründe. (Screenshot: t3n)

Hintergrundvideos verpassen deinen Web-Projekten eine sehr schöne optische Note. Wenn du dich nicht um die Vielzahl verschiedener Formate und das Hosting kümmern willst, bietet sich ein YouTube-Video an. Mit jQuery Youtube Background Video ist das schnell eingebunden.

jPanelMenu

jPanelMenu ist ein jQuery-Plugin für die Erstellung von Seiten-Navigationen. Bootstrap bietet eine ähnliche Funktion für responsive Layouts. Dabei klickt man auf einen Button, das Menü fährt von oben nach unten aus und schiebt den Content nach unten. Bei jPanelMenu fährt das Menü von der Seite herein. Einen ähnlichen Ansatz speziell für die mobile Navigation bietet euch Sidetap.

Auf der Seite von jPanelMenu könnt ihr das in Aktion sehen und selbst ausprobieren.

Effekte für Dropdown Listen

Mit dem Simple-Effects-for-Drop-Down-Lists-Plugin von Codrops könnt ihr normalen Select-Elementen einen neuen Anstrich verpassen. Das Plugin verbessert die Optik des Elements und versieht es mit verschiedenen Aufklappeffekten und Anordnungen.

Auf der Projektseite des Plugins erfahrt ihr, wie ihr es für eure Projekte nutzen könnt.

jQuery Scrollpath

Mit jQuery Scrollpath kann der Benutzer anhand eines Pfades durch die Webseite geleitet werden. Wird die Scroll-Funktion des Browsers benutzt, folgt der Viewport dem vordefinierten Pfad. So ergeben sich viele Möglichkeiten für die Gestaltung interessanter, interaktiver Websites.

Auf der Projektseite von jQuery Scrollpath erlebt ihr das Skript live in Aktion.

Countable.js

Countable.js ist eine JavaScript-Funktion, die live Absätze, Wörter und Zeichen in Eingabefeldern zählt. Dabei benötigt Countable keine externe Bibliotheken. Auf der Projektseite von Countable.js könnt ihr die Funktionen des Skripts live testen. Auf GitHub gibt es Countable zum direkten Download.

Questionmark.js

questionmark.js

Mit Questionmark.js kannst du Nutzer deiner Webseite oder Web-App Hilfestellung bei der Benutzung von Shortcuts geben. Erfasst das Skript die Eingabe eines Fragezeichens via Tastatur, öffnet sich ein modales Fenster in dem Shortcuts zusammengefasst werden können.

Das Skript läuft auf allen modernen Browser einschließlich des Internet Explorers ab Version 9. Mit einem zusätzlichen Skript lässt sich auch Kompatibilität mit dem Internet Explorer 8 herstellen.

ifvisible.js

if-visible.js-demo

Ifvisible.js ist ein nettes Skript, das eingesetzt werden kann, um zu überprüfen, ob ein Benutzer gerade deine Webseite betrachtet oder nicht. Das Skript reagiert darauf, ob gerade Benutzerinteraktion mit der Seite stattfindet und ob die Seite im Vordergrund ist. Mit einem Timer kann nach einer bestimmten Inaktivitätszeit eine Aktion ausgelöst werden. Auch das „Wakeup“ Event kann mit einer zusätzlichen Funktion belegt werden, sodass Ifvisible.js gut für die Realisierung von Lock- und Idle-Screens in Web-Apps benutzt werden kann.

Offline.js

offline.js-javascript

Ein weiteres Skript für das Handling von User-States ist Offline.js. Die schlanke Bibliothek überprüft, ob der Benutzer mit dem Internet verbunden ist und benachrichtigt die Benutzer, wenn die Verbindung gerade unterbrochen sein sollte. Besondern bei mobilen Anwendungen kann Offline.js ein nützlicher Wegbegleiter sein. Ein besonders nützliches Feature von Offline.js ist auch die Möglichkeit, Ajax-Requests nach Verlust der Verbindung zurückzuhalten und nach Wiederherstellung wieder an den Server zu senden. Offline.js wurde mit Browsern wie Chrome, Firefox, Safari und Internet Explorer 8+ getestet.

Pace.js

pace-progress-bar-javascript

Füge pace.js zu deinem Projekt hinzu, ergänze es um ein CSS-Theme deiner Wahl und du erhältst eine schicke Ladestandsanzeige. Derzeit stehen elf verschiedene und anpassbare Designs zum Download zur Verfügung.

Pongstar

pngstar

Pongstar ist ein jQuery-Plugin, das für die Darstellung aktueller Instagram-Medien benutzt werden kann. Die Bibliothek benötigt Bootstrap und und kann mit Hilfe deiner User-ID und eines Instagram-Access-Tokens deine Instagram-Beiträge direkt auf deine Seite holen. Dabei unterscheidet Pongstar.js zwischen den zuletzt gepusteten, gelikten und entsprechend getaggten Bildern.

Und welche JavaScript-Funktionen und jQuery-Plugins sind eure Favoriten? Wir freuen uns auf Ergänzungen und Tipps in den Kommentaren!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
9 Antworten
  1. von Tanja am 08.04.2013 (09:34 Uhr)

    Die t3n Artikel werden leider immer schlechter!

    Antworten Teilen
  2. von celle886 am 07.11.2013 (10:52 Uhr)

    Der Titel verspricht irgendwie etwas anderes. Ansonsten ganz interessant, wenn man nach spannenden Plugins oder einem netten Feature für seine Webseite sucht.

    Antworten Teilen
  3. von Micha am 07.11.2013 (14:09 Uhr)

    Kann @Tanja nur zustimmen.
    Linkliste mit teils recht alten Scriptlinks.

    Antworten Teilen
  4. von Niclas am 07.11.2013 (14:16 Uhr)

    Lieber mal auf http://www.unheap.com/ vorbei schauen!

    Antworten Teilen
  5. von pguso am 08.01.2014 (15:32 Uhr)

    Ergänzend möchte ich mein jQuery Plugin vorschlagen http://ladensia.com/circliful/demos.html - man kann damit Statistiken oder frotschritte in Kreisform darstellen.

    Antworten Teilen
  6. von Ich am 15.07.2015 (10:26 Uhr)

    Die t3n Artikel werden immer besser! Ehrlich, vielen Dank, Animsition ist echt fein!!

    Antworten Teilen
  7. von Raffael am 15.07.2015 (12:39 Uhr)

    "Der Material Design Prellender weist deine Besucher subtil ..." - das sollte wohl eher Preloader heißen, oder?

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Abo-Bundle für Entwickler: „HTML5, JavaScript und jQuery“ von dpunkt gratis sichern [t3n-Aktion]
Abo-Bundle für Entwickler: „HTML5, JavaScript und jQuery“ von dpunkt gratis sichern [t3n-Aktion]

Du hast Grundkenntnisse in HTML5, JavaScript und jQuery und möchtest einen Quereinstieg wagen? Dann ist unsere Aktion genau das richtige für dich, denn als einer der schnellsten 30 Neuabonnenten … » weiterlesen

WordPress als Datenquelle: So nutzt ihr die WP-REST-API
WordPress als Datenquelle: So nutzt ihr die WP-REST-API

Mit WordPress können wir nicht nur Inhalte auf der eigenen Seite bereitstellen und verteilen, sondern das CMS auch als Datenquelle für weitere Produkte nutzen. Wie das funktioniert und was genau … » weiterlesen

Die 10 beliebtesten Artikel der Woche: 30 Kostenlose WordPress-Themes und ein kleiner Knopf, der Amazon aufmischt
Die 10 beliebtesten Artikel der Woche: 30 Kostenlose WordPress-Themes und ein kleiner Knopf, der Amazon aufmischt

In dieser Rubrik stellen wir jede Woche die Artikel vor, die ihr am liebsten gelesen habt. Diese Woche dabei: Was die Generation Z antreibt, wer die fünf einflussreichsten Programmierer sind und die … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?