Blog

Responsive Webdesign wird mit dem Siegeszug der Smartphones immer wichtiger. Im Zeitalter von HTML5 und CSS3 gewinnen Animationen mehr an Bedeutung. Heute will ich euch ein kleinen Vergleich zeigen, wie man mit jQuery, und mit reinem CSS für die Animationen, eine mobile Navigation erzeugt.

HTML Grundgerüst

Schauen wir uns zunächst das Grundgerüst unseres kleinen Beispieles an:

<div class="menu">
  <!-- Menu -->
  <ul>
    <li class="btn-close"><a>x</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- Main body -->
<div class="body">

  <div class="btn-menu">
    Menu
  </div>
  <h1>Main header</h1>
  <p>
    Lorem ipsum dolor sit amet...
  </p>
</div>

Animation mit jQuery

Mit Hilfe der ".animate()" Funktion können wir sehr einfach DOM-Objekte animieren. Das machen wir mit zwei Click Events:

$('.btn-menu').click(function() {
    $('.menu').animate({
        left: "0px"
    }, 200);

    $('body').animate({
        left: "285px"
    }, 200);
});

$('.btn-close').click(function() {
  $('.menu').animate({
    left: "-285px"
  }, 200);

  $('body').animate({
    left: "0px"
  }, 200);
});

Live Demo

Sieht eigentlich ganz simpel aus, doch was passiert da eigentlich? Bei Animationen mit der Funktion ".animate()" von jQuery wird der sogenannte "Browser Reflow" angewandt, so das bei jeder Änderung im Frame alle DOM-Objekte neu berechnet werden müssen. Darüber hinaus laufen die Animation im Haupt-Thread des Browsers und nicht in einen nebenläufigen. Das Ergebnis ist noch "akzeptabel", solange man einen potenten Desktoprechner im Einsatz hat, jedoch für echte mobile Webseiten ist dies nicht empfehlenswert. Es gibt zwar fertige jQuery Animation-Plugins, aber darauf gehe ich in einen gesonderten Artikel ein.

Animation mit puren CSS

Was ist der Vorteil nun von reinen CSS-Animationen? Animationen die mit "transitions" bzw. "transform" gerendert werden, haben die Eigenschaft, dass die nicht unterbrochen werden können. Dieses bietet dem Browser die Möglichkeit, sie schneller zu berechnen, da es ein Start- und ein Endpunkt gibt. Außerdem werden sie in einem nebenläufigen Thread berechnet. Mit einen Trick nutzen wir sogar die GPU (Grafikkarte) für das Rendering, was uns speziell auf mobilen Geräten einen erheblichen Performanceboost gibt. Dazu verwenden wir einfach die CSS-Eigenschaft "transoform" mit dem Wert "tranlate3d(x,y,z)".

Hier der fertige CSS Code:

body {
  transition: all 0.2s ease;
  transform: translate3d(0,0,0);
}

.activeMobileNav {
  transform: translate3d(285px,0,0);
}

Und hier der javaSctipt-Code, wo wir einfach nur die Klasse im Body-Element togglen:

$('.btn-menu, .btn-close').click(function() {
  $('body').toggleClass('activeMobileNav');
});

Live Demo

Fazit

Während der Entwicklung mobiler Navigationen konnte ich die Vorteile (vor allem auf älteren Geräten) von der CSS-Eigenschaft "transform" gegenüber jQuerys ".animate()" beobachten. Letztes Mal habe ich über die native Dialoge in HTML5 berichtet. Native Animationen ohne die Hilfe von javaScript, zeigen wie weit HTML5 und CSS3 ist. Wie kurz erwähnt, werde ich im nächsten Artikel über eine kleines jQuery Plugin berichten, dass die Vorteile von "CSS transform" und ".animate()" vereint. Bis dahin, viel Spaß mit den CSS3-Animationen.