b.olzplatz für e.learning, me.diensachen und o.nlinekram

CSS-Transitions (3) … mit JavaScript

Zu Beginn wieder eine Spielerei 🙂

Via jQuery wird über den Button eine Klasse zweier Container (für die Rakete und den Hintergrund) getoggelt, bei denen die Position mittels CSS Transition animiert wird.

Download: Rakete. Für Offline-Nutzung notwendig: Die Grafiken "rocket.png" und "space.png".


Es gibt aber auch sinnvolle Beispiele, z.B. beim Button-Design: Auch hier auf der Seite wird übrigens der Menü-Button via toggleClass() und CSS Transitions animiert:

Und das geht "recht einfach": Der Button besteht lediglich aus zwei divs, einem für den Button und einem für das "Hamburger" -Icon

HTML

<div id="bsp_menutoggle">
  <div class="bsp_menutoggleicons"></div>
</div>

Bei click wird nun die Klasse bsp_menu_open getoggelt. Die aria-Attribute könnte man hier im Beispiel auch weglassen, bei Produktiv-Umsetzungen würde ich sie aber immer setzen.

jQuery:

$(document).ready(function(){
  $( "#bsp_menutoggle" ).on( "click" , function(e) {
    //Klasse zu Button hinzufügen
    $(this).toggleClass( "bsp_menu_open" );

    //aria-expanded-Status bei Klick togglen
    var ariaState = $( e.currentTarget );
      if (ariaState.attr( 'aria-expanded' ) === 'true' ) {
        $(this).attr( 'aria-expanded', 'false' );
      } else {
        $(this).attr( 'aria-expanded', 'true');
      }
    return false;
  });
});

Und dann das ganze stylen. Der Button hat eine feste Breite und Höhe von 100px, das Hamburger-Icon besteht aus dem div und einem :before und einem :after-Element. Die unterschiedlichen Breiten (70% für das "Haupt"-div vs. 100% für die Pseudo-Elemente) erklären sich dadurch, dass Pseudo-Element-Maße sich immer auf das Maß des Elements beziehen, denen sie angehängt sind und nicht auf das Elternelement.

Bei getoggelter Klasse wird nun der mittlere Hamburger-Strich "unsichtbar" (erhält die gleiche Farbe wie der Hindergrund) und die beiden anderen Striche werden gefärbt und gedreht, so dass sich ein "Schließen"-X ergibt. Das ganze an den richtigen Stellen mit einer Transition verfeinern: Fertig.

CSS:

/* Button */
#bsp_menutoggle {
  width: 100px;
  height: 100px;
  background: #005566;
  border: 0;
  padding: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hamburger */
#bsp_menutoggle .bsp_menutoggleicons,
#bsp_menutoggle .bsp_menutoggleicons::before,
#bsp_menutoggle .bsp_menutoggleicons::after {
  width: 70%;
  height: 10px;
  background: darkorange;
  margin: 0 auto;
  transition: all 0.3s ease;
  position: relative;
  top: calc(50% - 5px);
}
#bsp_menutoggle .bsp_menutoggleicons::before,
#bsp_menutoggle .bsp_menutoggleicons::after {
  content:"";
  width: 100%;
  position: absolute;
  transition: all 0.3s ease; 
}
#bsp_menutoggle .bsp_menutoggleicons::before {top: -25px;}
#bsp_menutoggle .bsp_menutoggleicons::after {top: 25px;}

/* Button 'active' */
#bsp_menutoggle.bsp_menu_open {background:darkorange;}

/* mittlerer Strich verschwindet, da Vorder = Hintergrundfarbe */
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons {background: darkorange;}

/* oberer und unterer Strich werden grün ... */
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::before,
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::after {
  background:#005566;
}

/* ... und gedreht */
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::before {
  transform: rotate(45deg);
  top: 0;
}
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::after {
  transform: rotate(-45deg);
  top: 0;
}

Das ist vor allen Dingen eine Menge "Schreibarbeit", der Effekt ist aber ganz ansehlich 🙂


Der "Schrumpfheader" ist schon fast wieder aus der Mode, aber er ist ein hübsches Beispiel für die JavaScript-basierte Klassenzuweisung und die Animation dieser Klassenänderung via CSS-Transition. Ich selber benutze den Schrumpfheader immer noch gerne, um auf Endgeräten mit kleineren Viewports Platz zu schaffen.

Darüber hinaus sind diese "Scroll-to-Top"-Buttons, die ab einer festgelegten erreichten "Scroll-down"-Position eingeblendet werden, ebenfalls so zu realisieren: JavaScript übernimmt die Klassenzuweisung an Header und Button sowie die Scroll-to-Top-Animation, CSS übernimmt die Ein- und Ausblendungen bzw. Schrumpfanimationen:

Beispiel: Schrumpfkopf


Nächstes Beispiel: Ein Impressums wird mit CSS-Transitions in einer Lightbox eingeblendet (würde ich wohl eher als reine CSS-Lösung bauen, um überflüssiges JavaScript zu vermeiden):


Schreibe einen Kommentar

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

Zustimmung zur Datenverarbeitung

Einstellungen zu Cookies

Bitte treffe eine Auswahl. Weitere Informationen zu den Auswirkungen Deiner Auswahl findest Du unter Hilfe, in der Datenschutzerklärung und im Impressum.

Treffe bitte eine Auswahl um fortzufahren.

Deine Auswahl wurde gespeichert!

Weitere Informationen

Erläuterung

Um fortfahren zu können, musst Du eine Cookie-Auswahl treffen. Bitte wähle zwischen

  • Alle Cookies zulassen:
    Alle Cookies dieser Seite ("First-Party-Cookies") sowie z.B. Tracking- und Analyse-Cookies, auch von Drittanbietern ("Third-Party-Cookies") sind zugelassen und können auf Deinem Endgerät gespeichert werden.
  • Nur absolut notwendige Cookies zulassen:
    Es werden keine Cookies gesetzt, es sei denn, es handelt sich um technisch notwendige Cookies.

Details zu Cookies und die Option, Deine Einstellungen nachträglich zu ändern gibt es in der Datenschutzerklärung. Die Anbieterkennzeichnung findest Du im Impressum

Zurück zur Auswahl