Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 22. Januar 2015

„Animsition“: Benutzerfreundliches jQuery-Plugin für animierte Seitenübergänge

Dank JavaScript in Kombination mit CSS3 stellen Animationen auf Websites keine große Herausforderung mehr da. Auch Seitenübergänge innerhalb einer Website werden gerne per CSS3-Animationen ein wenig in Schwung gebracht. Mit der aktuellen Fassung der Cascading Stylesheets sind einfache Fade-in- und Slide-in-Effekte ebenso möglich wie 3D-Drehungen, um von einer Seite auf eine andere überzuleiten. Das recht frische jQuery-Plugin „Animsition“ hilft, solche animierten Seitenübergänge spielend einfach ins eigene Webprojekt eingebaut.

animsition

Dateien einbinden, HTML auszeichnen, Plug-in starten

Animsition ist schnell eingebunden und konfiguriert. Es besteht aus einer JavaScript- sowie einer Stylesheet-Datei, die zusammen mit jQuery im HTML-Dokument eingebunden werden. Außerdem muss ein HTML-Container ausgezeichnet werden, der später für die Übergänge ein- beziehungsweise ausgeblendet werden soll. Da man in der Regel den gesamten Seiteninhalt animieren möchte, sollte der Container daher den gesamten Inhalt innerhalb des Bodys umschließen.

Es ist aber auch möglich, nur einen Teil des Seiteninhaltes zu umschließen. Navigation und Logo bleiben ja oftmals unverändert innerhalb einer Website und können daher jenseits des zu animierenden Bereichs liegen.

<div class="animsition">
  …
</div>

Wichtig ist, dass dem Container die Klasse „animsition“ übergeben wird. Nur so kann das Plug-in darauf zugreifen und das Element animieren. Damit eine Seite per „Animsition“ aufgerufen werden kann, ist es darüber hinaus wichtig, den „<a>“-Elementen die Klasse „animsition-link“ zuzuweisen.

<a class="animsition-link" href="kontakt.html">Kontakt</a>

Anschließend wird das Plug-in aufgerufen. Verschiedene Parameter helfen bei der Konfiguration.

$(".animsition").animsition({
  inClass: "flip-in-x",
  outClass: "flip-out-x"
});

Über die Klasse „animsition“ ruft man per jQuery das Plug-in auf. Die beiden Optionen „inClass“ und „outClass“ geben die Art vor, wie die aktuelle geladene Seite ausgeblendet und die zu ladende Seite eingeblendet werden soll.

Die Einstellung „inClass“ sorgt also dafür, dass die aktuelle Seite im Beispiel per „flip-in-x“-Effekt eingeblendet wird, sobald diese geladen ist. Die Einstellung „outClass“ sorgt dafür, dass die aktuelle Seite per „flip-out-x“-Effekt ausgeblendet wird, sobald ein Link mit der Klasse „animsition-link“ aufgerufen wird.

Es gibt weitere Möglichkeiten, das Plug-in zu konfigurieren. Per „inDuration“ und „outDuration“ lässt sich beispielsweise die Dauer der Animation angeben. Da ein animierter Seitenübergang nur dann sinnvoll ist, wenn die per Link ausgewählte Seite bereits geladen wurde, sorgt das Plug-in dafür, dass vor dem Seitenübergang die Zielseite geladen wird. Während des Ladeprozesses wird auf der Basis von CSS3 und SVG eine typische Ladeanimation gezeigt. Auch diese Animation kann individuell erstellt und anstelle der Standardanimation verwendet werden. Wichtig ist nur, dass die Ladeanimation per CSS-Klasse erreichbar ist.

$(".animsition").animsition({
  loadingClass: "meineLadeAnimation"
});

Im Beispiel wird die Klasse „meineLadeAnimation“ als Ersatz für die Standardanimation angegeben.

Fade, Rotate, Flip und Zoom

„Animsition“ stellt viele verschiedene Effekte für die Seitenübergänge zur Verfügung. Dazu zählen mehrere Fade-Effekte, um Seiten unterschiedlich ein- und auszublenden. Es gibt einfache Fade-in- und Fade-out-Effekte sowie solche, bei denen die Seite während des Ein- oder Ausfadens in eine Richtung bewegt wird.

Daneben gibt es Rotationseffekte, welche die Seite nach rechts oder links aus dem Fenster heraus oder wieder hinein drehen, oder Flip-Effekte, die eine Seite nach vorne oder hinten heraus oder hinein kippen. Dabei stehen verschiedene Perspektiven zur Auswahl, welche für ein unterschiedlich starkes Kippen sorgen.

Außerdem bietet das Plugin Zoom-Effekte, welche eine Seite beim Verlassen nach hinten wegzoomen, während sie beim Laden von hinten hineinzoomen. Über die Einstellungen „inClass“ und „outClass“ lässt sich jeweils einer der verschiedenen Seitenübergänge auswählen. Natürlich sollte man darauf achten, dass man die jeweils richtige Variante für das Verlassen einer Seite und das Laden einer Seite auswählt. Denn für jeden Effekt gibt es eine „in“- sowie eine „out“-Variante.

Individuelle Seitenübergänge für jeden Link

Die Konfiguration über den Plugin-Aufruf hat den Nachteil, dass nur jeweils ein Effekt für das Ein- beziehungsweise Ausblenden angegeben werden kann. Die in „inClass“ und „outClass“ hinterlegten Effekte werden nämlich im ganzen Dokument angewendet.

Es gibt aber auch die Möglichkeit, für jeden Link einen individuellen Effekt für das Ausblenden zu definieren. Dazu wird dieser einfach per Data-Attribut dem „<a>“-Element hinzugefügt.

<a class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="1000" href="kontakt.html">Kontakt</a>

Per „data-animsition-out“ wird der Effekt für das Ausblenden festgelegt. Die Dauer der Animation lässt sich per „data-animsition-out-duration“ angeben. Die per Data-Attribute gemachten Angaben überschreiben die Werte innerhalb des Plugin-Aufrufs. Einen Effekt für das Einblenden der zu ladenden Seite lässt sich nicht innerhalb der „<a>“-Elementes festlegen. Allerdings kann auch dieser für jede Seite per Data-Attribut angegeben werden – und zwar innerhalb der Containers, der den Seiteninhalt umschließt.

<div class="animsition" data-animsition-in="fade-in-right" data-animsition-in-duration="1500">
  …
</div>

Overlay-Effekte als Besonderheit

Neben den verschiedenen Seitenübergängen bietet „Animsition“ als Besonderheit einige Overlay-Effekte. Bei diesen wird die Seite selbst nicht animiert. Stattdessen wird eine Fläche über die Seite bewegt, während im Hintergrund die ausgewählte Seite geladen wird. Anschließend wird die Fläche wieder aus dem Fenster weg bewegt.

Auch für diesen Overlay-Übergang gibt es verschiedene Varianten. So lässt sich die Fläche aus beziehungsweise in jede Richtung animieren. Um die Overlay-Effeke einzusetzen, muss dieser in der Konfiguration eingeschaltet werden.

$(".animsition").animsition({
  overlay: true
});

„Animsition“ für WordPress

Um das Plug-in ohne größere Konfiguration in ein WordPress-System integrieren zu können, steht ein spezielles Plug-in zur Verfügung. Ist dieses eingebunden, können die Seitenübergänge (Effekt und Dauer) bequem über die WordPress-Oberfläche eingestellt werden.

Browsersupport und Links zum Beitrag

Animsition läuft in allen gängigen Browsern – im Internet Explorer ab Version 10. Zu den anderen Browsern wird keine Versionsnummer angegeben. Aber es ist davon auszugehen, dass „Animsition“ in allen Browsern läuft, die CSS3 beherrschen. Über die Option „unSupportCss“ kann man zudem CSS-Eigenschaften übergeben, die das Plug-in bei einem Browser deaktivieren, der mindestens eine der dort hinterlegten Eigenschaften nicht unterstützt.

$(".animsition").animsition({
  unSupportCss: ["animation-duration", "-webkit-animation-duration", "-o-animation-duration"]
})

Standardmäßig ist dort die Eigenschaft „animation-duration“ mit seinen verschiedenen Vendor-Varianten hinterlegt. Eigentlich sollte eine Anpassung dieser Option nicht notwendig sein, man kann aber die Liste auch individuell verändern.

Animsition steht unter der liberalen MIT-Lizenz und ist somit für alle frei zugänglich und auch in kommerziellen (Kunden-)Projekten kostenlos einsetzbar.

(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.

2 Kommentare

  1. Danke Denis, für diesen interessanten Beitrag!

    Ohne es zu wissen, war ich nämlich schon recht lange auf der Suche nach selbigem.

    Allerdings, hätte ich auch gerne eine Animation beim Einblenden der neuen Seite und nicht nur beim Ausblenden. Oder geht das doch auch mit diesem PlugIn?

    • Ok, habe gerade gesehen, dass auch das Einblenden Animiert wird. Zumindest bei mir im Firefox – der Chrome „verschluckt“ bei mir den Einbeldungseffekt.

Schreibe einen Kommentar zu Stephan Antworten abbrechen

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