CSS-Transitions

Teil 3: Beispiele 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. 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):

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


Deprecated: Die Datei Theme ohne comments.php ist seit Version 3.0.0 veraltet und es ist keine Alternative verfĂŒgbar. Bitte fĂŒge ein comments.php-Template zu deinem Theme hinzu. in /home/medienma/public_html/wp-includes/functions.php on line 5653

Schreibe einen Kommentar

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


Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home/medienma/public_html/wp-content/plugins/simple-lightbox/includes/class.utilities.php on line 545