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. Eine body-Klasse kann helfen. Zum Beispiel, um bei full width-Menüs zu verhindern, dass die Seite im Hintergrund scrollt, wenn das Menü gescrollt wird.
jQuery
$(document).ready(function(){ $( "#bsp_menutoggle" ).on( "click" , function(e) { //Klasse zu Button hinzufügen $(this).toggleClass( "bsp_menu_open" ); $("body").toggleClass( "has_mobile_menu" ); /*optional*/ }); });
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: #bf304a; 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: #ffe5ea; 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:ffe5ea;} /* mittlerer Strich verschwindet, da Vorder- = Hintergrundfarbe */ #bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons {background: ffe5ea;} /* oberer und unterer Strich werden rot ... */ #bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::before, #bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::after { background:#bf304a; } /* ... 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):
Beispiel: Lightbox einblenden
Die ersten Teile der Transitions-Reihe gibt es hier:
"CSS-Transitions, Teil 3: Beispiele mit JavaScript"
von
Martin Smaxwil
ist unter einer
CC BY 4.0-Lizenz veröffentlicht.
Darüber hinausgehende Hinweise zu Bestandteilen wie Code Snippets u.ä. findet man hier.