Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Denis Potschien 24. Oktober 2015

jQuery: Inhalte animiert einblenden mit animatedModal.js

Dank CSS3 sind Animationen immer häufiger ein fester Bestandteil zeitgemäßer Websites. So werden sie für Off-Canvas-Navigationen oder auch zur Einblendung zusätzlicher Inhalte wie Galerien eingesetzt. Das Framework animatedModal.js ermöglicht es, solche zusätzlichen Inhalte – Modals genannt – per CSS3-Animationen browserfüllend einzublenden. So lassen sich Bilder, Filme, zusätzliche Texte und alles, was sonst noch per Buttonklick eingeblendet werden soll, effektvoll in Szene setzen.

animatedmodaljs-teaser_DE

Modal auszeichnen und per animatedModal.js einblenden

Da die Animationen zum Ein- und Ausblenden der Modal-Bereiche über die CSS-Bibliothek „animate.css“ erfolgt, muss diese zunächst im HTML-Head eingebunden werden. Anschließend wird ein Modal-Bereich im HTML-Body ausgezeichnet. Das kann beispielsweise ein „<div>“-Element sein. Möglich sind aber auch HTML5-Elemente wie „<section>“ oder „<aside>“. Über eine ID wird der Modal-Bereich später angesprochen.

<div id="beispiel">
  <div class="close-beispiel">Schließen</div>
  <div class="modal-content">
    …
  </div>
</div>

Jeder Modal-Bereich besitzt zwei Kindelemente: ein Element, über welches der Modal-Bereich wieder geschlossen wird, und ein Element mit dem eigentlichen Inhalt des Modal-Bereichs. Das Schließen-Element muss einen Klassennamen besitzen, der aus „close-“ und der ID des Elternelements besteht – im Beispiel also „close-beispiel“. Der Inhaltebereich erhält den Klassennamen „modal-content“.

Um einen Modal-Bereich öffnen zu können, muss noch ein Button beziehungsweise ein Link per „<a>“-Element ausgezeichnet werden. Dieser erhält eine ID sowie als „href“-Attribut die Ziel-ID – also die ID des Modal-Bereichs.

<a id="beispiellink" href="#beispiel">Öffnen</a>

Im Beispiel soll per Klick auf den Link der Modal-Bereich mit der ID „beispiel“ geöffnet werden. Anschließend werden jQuery und die Datei „animatedModal.js“ im HTML-Body eingebunden. Über jQuery wird dem Öffnen-Link die Methode „animatedModal()“ zugewiesen.

$("#beispiellink").animatedModal();

Mehr ist zunächst nicht zu machen. animatedModal.js öffnet den Modal-Bereich anhand der im „href“-Attribut angegebenen ID per Zo0m-in-Animation und mit einem vordefiniertem Hintergrund. Die Schließen-Schaltfläche wird als Text mittig am oberen Rand dargestellt. Diesen kann man mit eigenem CSS den Bedürfnissen anpassen.

Aussehen und Animation einstellen

Um den Modal-Bereich zu indivisualisieren, stehen einem eine Reihe von Optionen zur Verfügung. So gibt es zum Beispiel die Möglichkeit, die Hintergrundfarbe für den Bereich festzulegen.

$("#beispiellink").animatedModal({
  color: "#000000"
});

Im Beispiel wird der Hintergrund schwarz dargestellt. Auch die Art der Ein- und Ausblend-Animation kann man einstellen. Hier stehen einem die Animationsvorgaben von „animate.css“ zur Verfügung. Auch die Dauer der Animation lässt sich angeben.

$("#beispiellink").animatedModal({
  animatedIn: "bounceIn",
  animatedOut: "bounceOut",
  animationDuration: "2s"
});

Während über „animatedIn“ und „animatedOut“ eine Animationsvorgabe angegeben wird, definiert „animationDuration“ die Dauer. Diese wird in Sekunden in der CSS-Einheit für Sekunden zugewiesen.

Für den Fall, dass der Inhalt des Modal-Bereiches so lang ist, dass sich ein Scrollen eventuell nicht vermeiden lässt, gibt es die Möglichkeit, das Scrollen innerhalb dieses Bereiches zu erlauben.

$("#beispiellink").animatedModal({
  overflow: "scroll"
});

Der Wert für die Option „overflow“ muss einem der möglichen Werte für die gleichlautende CSS-Eigenschaft entsprechen.

Per Events auf Öffnen und Schließen reagieren

animatedModal.js stellt zudem vier Events zur Verfügung, mit denen auf das Öffnen und Schließen eines Modal-Bereichs reagiert werden kann. So gibt es die Events „beforeOpen“ und „afterOpen“ sowie „beforeClose“ und „afterClose“.

Die Ereignisse „beforeOpen“ und „beforeClose“ rufen eine Funktion auf, sobald ein Button beziehungsweise Link zum Öffnen oder Schließen eines Modal-Bereichs betätigt wurden. „afterOpen“ und „afterClose“ hingegen werden ausgeführt, sobald die Animation zum Ein- beziehungsweise Ausblenden beendet wurde.

$("#beispiellink").animatedModal({
  beforeOpen: function() {
    console.log("Öffnen-Link wurde geklickt, Animation wird jetzt gestartet.");
  }
});

Im Beispiel wird etwas in die Konsole des Browsers geschrieben, sobald ein Link zum Öffnen eines Modal-Bereichs angeklickt wird.

Die Events können beispielsweise genutzt werden, um den Elementen innerhalb eines Modal-Bereichs Klassen zuzuweisen, die eine Animation starten. So werden während des animierten Öffnens des Modal-Bereichs auch die anderen Elemente per Animation in Stellung gebracht. Auf der Projektseite finden sich dazu einige schöne Beispiele.

animatedmodaljs_beispiel
Beispiel für eine Einblendung, bei der auch die Inhalte per Animation zum Einsatz kommen. 

Browsersupport und Lizenz

animatedModal.js läuft unter allen modernen Browsern. Der Internet Explorer wird ab Version 10 unterstützt. Das Script steht unter der MIT-Lizenz und kann daher kostenfrei auch in kommerziellen Projekten eingesetzt werden.

Im Download-Paket sind alle notwendigen Dateien vorhanden, einschließlich einer kleinen Demo-HTML-Datei. So kann man direkt selbst animatedModal.js ein wenig ausprobieren.

Links zum Beitrag

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar

  1. Wieso gibt es hier nie live beispiele?!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.