CSS-Transitions Teil 3: Anwendungsbeispiele MIT JavaScript

… mit JavaScript

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:

„Schrumpfheader“ und Scrollbutton


Zu guter Letzt: Am Beispiel eines Impressums wird mit CSS-Transitions eine Lightbox eingeblendet:

Lightbox einblenden

Die ersten Teile der Transitions-Reihe gibt es hier:

CSS-Transitions Teil 1: Überblick

CSS-Transitions Teil 2: Anwendungen ohne JavaScript

Schreibe einen Kommentar

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