Kategorien
Design HTML/CSS JavaScript & jQuery Webdesign

JavaScript: Ramjet transformiert HTML-Elemente untereinander

Transformationen und Animationen kommen dank CSS3 und HTML5 auf immer mehr Websites zum Einsatz. Die JavaScript-Bibliothek ramjet nutzt die CSS3-Möglichkeiten und ermöglicht es, ein beliebiges HTML-Element in ein anderes transformieren zu lassen.

javascript-ramjet-teaser_DE

Einfacher Effekt mit großer Wirkung

Im Grunde ist der Transformationseffekt, den ramjet verwendet, ein einfacher. Man nehme zwei beliebige HTML-Elemente –Bilder, Texte und SVG-Grafiken können dabei kombiniert werden; auch die Position und Größe der Elemente spielt keine Rolle. Über einen einfachen JavaScript-Aufruf erreicht man, dass das erste Element per Animation in das zweite transformiert wird.

ramjet_beispiel
Beispiel für eine Transformationsanimation, wie man sie von iOS kennt

Dabei wird die Größe und Position des ersten Elementes an das zweite angeglichen. Gleichzeitig wird das erste Element aus- und das zweite, dahinter angeordnete eingeblendet. In einer zügigen Animation erreicht man einen eindrucksvollen Transformationseffekt. Je länger die Animationsdauer ist, desto deutlicher wird die Art und Weise der Tranformation und verliert ein wenig am Wow-Effekt.

Elemente per ID ansprechen und tranformieren

ramjet ist sehr einfach angewendet. Ist die JavaScript-Bibliothek eingebunden, lassen sich die beiden zu transformierenden HTML-Elemente aufgrund ihrer ID ansprechen.

ramjet.transform(elementA, elementB);

Im Beispiel wird ein Element mit der ID „elementA“ in das Element mit der ID „elementB“ transformiert. In dieser einfachen Variante bleiben die beiden Ausgangselemente als solche sichtbar.

Will man erreichen, dass das zweite Element erst durch die Transformation erscheint und das erste Element dadurch ausgeblendet wird, muss man etwas mehr JavaScript in den Effekt investieren.

elementA.style.opacity = 0;

ramjet.transform(elementA, elementB, {
  done: function () {
    elementB.style.opacity = 1;
  }
});

Für das Beispiel muss zunächst das zweite Element („elementB“) versteckt werden. Das erreicht man zum Beispiel, indem man seine Sichtbarkeit (per CSS-Eigenschaft „opacity“) auf Null setzt. Anschließend wird per JavaScript zu Beginn der Transformationsanimation auch das erste Element („elementA“) versteckt. Dann leiten wir per „ramjet.transform()“ die Transformation ein, indem wir die beiden IDs („elementA“ und „elementB“) übergeben. Während der Animation sind die beiden Ursprungselemente somit nicht sichtbar.

ramjet_animation
Ablauf der Animation von Element A zu Element B

Über den Parameter „done“ wird eine Funktion ausgeführt, sobald die Transformationsanimation abgeschlossen ist. Diese sorgt dafür, dass das zweite Element sichtbar wird, sobald die Animation beendet wurde.

Zusätzliche Parameter

Neben dem Parameter „done“ gibt es weitere Möglichkeiten, den Übergang zu bestimmen. Per „duration“ kann beispielsweise die Länge der Animation angegeben werden. Außerdem besteht mit „easing“ die Möglichkeit, eine Easing-Methode für das Beschleunigen und Abbremsen der Animation festzulegen.

ramjet.transform(elementA, elementB, {
  duration: 5000,
  easing: ramjet.easeIn
});

Während „ramjet.linear“ die Standard-Easing-Methode ist, gibt es „ramjet.easeIn“, „ramjet.easeOut“ und „ramjet.easeInOut“ für unterschiedliche Animationseffekte.

Statt die Elemente direkt per „style.opacity“ unsichtbar zu machen, kann man auch die Methoden „ramjet.hide()“ und „ramjet.show()“ verwenden. Diese setzen die „opacity“-Eigenschaft ebenfalls auf 0 beziehungsweise 1.

Browsersupport und Link zum Beitrag

ramjet läuft auf allen modernen Browser wie Chrome und Firefox. Außerdem funktioniert die Bibliothek im Internet Explorer ab Version 9. ramjet wurde unter die MIT-Lizenz gestellt, ist also kostenfrei auch für kommerzielle Projekte einsetzbar.

(dpe)

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

Schreibe einen Kommentar

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