Hilfreiche jQuery/Javascript Plugins – Teil 5

Hilfreiche jQuery/Javascript Plugins – Teil 5

Heute setzen wir unsere Reihe zu jQuery Plugins fort und stellen euch ein paar praktische Neuheiten vor, die jede Website zum absoluten Hingucker machen.

iziToast

iziToast

Mit diesem Plugin könnt ihr schicke Notifications auf eurer Website einbinden. Diese sind nicht nur schlank und flexibel, sondern auch noch responsive. Dadurch lassen sich informative Mitteilungen auf der Seite einblenden, aber auch Aufforderungen zu einer Aktion oder Warnmeldungen. Das sieht nicht nur gut aus, sondern macht die Seite auch persönlicher und interaktiver für Nutzer.

Hier eine beispielhafte Vorschau des Codes:

Mirror Effect

Der Name „Mirror Effect“ sagt eigentlich schon alles: Hiermit könnt ihr hübsche Spiegeleffekte erzeugen. Das macht sich zum Beispiel besonders gut auf der Landing Page einer Website. Ein Bild wird entweder innerhalb einer Slideshow gespiegelt, oder einfach als Dekoration. Wichtig ist, dass dafür ein moderner Browser verwendet wird.

nanogallery2

nanogallery2

nanogallery2 ermöglicht das Erstellen schöner Bildergalerien mit einer Vielzahl an Effekten. Es stehen eine Reihe von Designoptionen zur Verfügung, mit denen ihr nach Belieben eine Galerie für eine Website oder einen Blog entwerfen könnt. Individuell angepasst werden können zum Beispiel das Layout, Hover Effekte für Thumbnails und der Darstellungsmodus. Auch die Navigation über Tags und die Einbindung von Bildern aus Services wie Flickr ist möglich.

Das sieht dann zum Beispiel so aus:

Paroller.js

Dieses Plugin macht Parallax Scrolling auf Websites möglich. Das sieht zum einen wirklich elegant aus und bringt zum anderen Leben in die Seite. Während des Scrollens können sich Elemente entweder horizontal oder vertikal bewegen. Der Code lautet dann beispielsweise so:

Außerdem ist das Plugin auch noch für mobile Geräte geeignet. Was will man mehr?

 

Hilfreiche jQuery / Javascript Plugins – Teil 4

Hilfreiche jQuery / Javascript Plugins – Teil 4

Heute stellen wir euch ein paar der jQuery Plugins für den Frontend Bereich vor, die wir persönlich für kreativ und nützlich erachten und warum.

  • Material Design Hierarchical Display
    Wenn ihr dem Link, unterlegt im Bild, folgt, seht ihr wie aus vielen verschiedenen Elementen, ein einziges großes entsteht. An den Beispielen könnt ihr euch mit den Animationseffekten ausprobieren. In jedem Fall ist hier ein einschlägiger Effekt gegeben, wenn man diese Plugins auf Internetshops als Logo oder auf Unternehmenswebsites nutzt. Der Kreativität sind dabei keine Grenzen gesetzt, denn sowohl Effekte als auch Elementenanordnung und ob man aus vielen kleinen überhaupt ein großes zusammenhängendes machen möchte, sind individuell gestaltbar.

Einen Einblick in den Code seht ihr hier:

Mit 2 Zeilen ist diese Codierung also recht kurz und simpel gehalten, erzielt aber einen einschlägigen Effekt für einen professionellen Internet-Auftritt.

  • TwentyTwenty

    Das perfekte Plugin, um einen Vergleich zwischen zwei Aspekten visuell hervorzuheben.
    Das Tool sorgt dafür, dass man zwei Bilder übereinander legen kann, ohne dass man zwei Bilder nebeneinander posten muss. Dabei kann man ganz einfach mittels eines Sliders das obere Bild schieben, um das untere zu sehen. Das eignet sich optimal für Vergleiche, in dem man diverse Änderungen an Gebäuden beispielsweise darstellen möchte. Durch den Slider bestimmt man selbst bis zu welchem Abschnitt man das obere Bild zur Seite schiebt und wie viel man vom anderen, unten gelegenen, offenbart. Somit kann man ganz genau Stück für Stück die übereinander liegenden Bilder live miteinander vergleichen. Für einen Vorher/Nachher-Effekt ideal.
    Hier der Code dazu:
  • RoundSlider

Hier haben wir einen Slider, den man ebenfalls individuell designen kann und für verschiedene Zwecke für sich nutzen kann. Auch hier sind Online-Shops als Beispiel zu nennen. Diese haben des Öfteren Funktionen, mit denen man die Mindest- sowie Maximal-Preishöhe einstellen kann. Dafür sind die modern gestalteten Slider ein Blickfang. Auch bei Abbildungen von Prozentzahlen können die Slider eine innovative Darstellungsform bieten, sodass man sich von anderen digitalen Präsenzen unterscheidet.
Hier könnt ihr euch die verschiedenen Optionen der Slides ansehen:

Das waren einige wenige Plugin Beispiele, in die man sich sowohl von der Programmierer-Seite als auch von einem unternehmerischen Standpunkt aus einarbeiten kann. Simple Codierung mit prägnantem Effekt durch Animation und Design ergeben Plugins, die jede digitale Präsenz nach Außen entsprechend vermarkten. In der heutigen Zeit ist das Visuelle aller anderen Vermarktung voraus. Daher lohnt es sich mit den einfachsten Mitteln auf Blickfang zu setzen.

 

Hilfreiche jQuery/Javascript Plugins – Teil 3

Hilfreiche jQuery/Javascript Plugins – Teil 3

Willkommen zum dritten Teil unserer JS/jQuery Reihe. Wie immer gibt es eine Aufteilung zwischen Front- und Backend.

Frontend

  • Hamburgers

    null
    Hamburger, Cheeseburger, Big Mac! Hamburgers ist ein JS Plugin, das einem verhilft den berühmten Hamburger Button zu erstellen. Man hat eine große Vielfalt an vordefinierten Buttons mit schönen Animationen. Alles ist CSS basierend und somit gut anpassbar. Das Beste daran ist die Länge und Komplexität des Codes:

  • superplaceholder

    superplaceholder
    Sehr schönes Plugin, womit man mit wenig Code das Befüllen von Feldern animieren kann. Es ist sehr gut animiert und dazu kleiner als 1 kb. Ein nützliches Gimmick für Seiten mit Suchfunktionen.

  • vivus

    vivus
    Wir haben zwar bereits ein SVG Plugin vorgestellt, doch dieses ist einfach genial. Es besitzt 3 verschiedene Animationstypen (Delayed, Asnyc und OneByOne), die jede Darstellung von SVGs zu einem Erlebnis machen. Sogar das Problem, des richtigen Timings wird von dem Plugin gelöst. Es gibt diverse Timing Funktionen, die sich an das SVG anpassen lassen und die Animation perfekt aussehen lassen. Ein Blick darauf lohnt sich!

  • A-FRAME

    A-Frame
    Virtual Reality, eine Technik die in aller Munde ist. Mit A-Frame kann jeder VR auf seine Seite integrieren, und das so unglaublich simpel. Es gibt eine große Anzahl an vordefinierten 3D-Formen, die man mit zwei Zeilen Code einbinden kann. Weiterhin kann man selbst Formen erstellen, 3D Bilder animieren und, und, und. Mit diesem Plugin kann man definitiv Aufmerksamkeit erregen.

Backend

  • clipboard.js

    clipboard.js
    Die wirklich einfachste Methode dem Benutzer einen „Copy to Clipboard“ Button zu geben. Der User muss nicht immer und immer wieder Texte markieren, alles per Knopfdruck, direkt in seine „Clipboard“. Sehr nützlich für Seiten, bei denen die Markierfunktion unterdrückt wird.

Hilfreiche jQuery/Javascript Plugins – Teil 2

Hilfreiche jQuery/Javascript Plugins – Teil 2

Heute geht es weiter mit der JQuery/JS Plugin Reihe. Der Beitrag ist wieder in Frontend und Backend unterteilt.

Frontend:

  • JinvertScroll

    Adieu langweiliges Scroll-Down, ahoi innovatives Side Scrolling. Das Plugin ermöglicht es einem mit wenig Aufwand einen Sidescroll Effekt zu erzeugen, der etwas an das Metro Menü in Windows 8 erinnert. Das Ganze hat auch einen Parallax Effekt und wirkt somit umso schöner.

  • Animsition


    Ihr habt es satt auf einen Link zu klicken und einen normalen Seitenaufbau zu sehen? Animsition tut etwas dagegen. Mit diesem kleinen Plugin ist es möglich Webseiten beim Laden einen CSS Effekt ausführen zu lassen. Derzeit sind 58 Effekte vordefiniert, die verschiedene Fade Effekte beinhalten, als auch Rotate und Flip. Es lohnt sich reinzuschauen!

  • Photopile JS


    Jeder kennt sie, jeder nutzt sie aber will sie auch jeder? Es geht um die Imagegallery, meistens ein Grid mit mehreren Bildern. Photopile schafft diese Mechanik ab und erstellt einen zusammengewürfelten Haufen aus Fotos, der schön animiert ist. Sehr empfehlenswert für unkonventionelle Fotoausstellungen.

  • Splitchar


    Einfarbige Fonts sind gestern gewesen. Splitchar erlaubt es euch euren Fonts mehrere Farben zu geben und das sowohl vertikal als auch horizontal.

Backend

  • BttrLazyLoading


    Dieses Plugin ist schwer in einem der beiden Bereiche einzuordnen. Die Hauptfunktion ist ein verzögertes Laden von Bilder. Diese werden erst dann geladen, wenn sie in den Viewport kommen. Das hat den Vorteil, dass Webseiten sich viel schneller aufbauen und bei mobilen Endgeräten das Datenvolumen gespart werden kann. Es ist komplett responsiv und Retina ready. Weiterhin gibt es diverse Einstellungen, die man tätigen kann um die Effekte von der Bildanzeige anzupassen. Sehr gelungenes Plugin!

  • Face Detection


    Facetagging gesucht, Facetagging gefunden! Mit Face Detection könnt ihr mit extrem wenig Code die Gesichter auf Bilder auslesen. Das Plugin liefert euch ein „Face“ Objekt mit Koordinaten, Höhe und Breite. Diese können für verschiedene Dinge genutzt werden, wie im Bild zu sehen ist.

  • SVGMagic


    SVGMagic ist zwar sehr simpel aber trotzdem sehr mächtig. Es ist ein Muss für Webseiten, die ältere Browser supporten sollen. Das Plugin checkt ob der Browser SVG Bilder unterstützt, wenn dem nicht so ist wandelt es alle Bilder direkt in PNG Bilder um und das im Grunde genommen ohne Qualitätsverlust.

Wie immer, wenn ihr weitere gute Plugins kennt einfach in die Kommentare schreiben.