Katalog
Eine Auswahl dessen, was wir bauen können, zum Ausprobieren. Scrollen Sie, fahren Sie mit der Maus über die Buttons, drücken Sie Tab. Zu jedem Effekt steht, wofür er gut ist und worauf wir achten.
Neun Bausteine. Die kleinen Bühnen reagieren, während sie durchs Bild laufen; die beiden großen bleiben stehen und blättern.
Katalog · S1
Wörter werden heller, während man liest und scrollt. Der Blick bleibt am Text, nicht an der Animation.
Bewegung erklärt etwas. Sie lenkt den Blick dorthin, wo er gebraucht wird, und sie hört auf, sobald sie nichts mehr zu sagen hat.
Katalog · S2
Überschriften schieben sich aus einer unsichtbaren Linie nach oben. Wirkt ruhig und geschnitten.
Katalog · S3
Hintergrund, Bild und Schrift bewegen sich unterschiedlich schnell gegeneinander.
Katalog · S4
Ein Bildausschnitt wächst beim Scrollen von der kleinen Karte zur vollen Fläche.
Katalog · S5
Ein Kreis wächst und gibt das Bild frei, wie auf unserer Startseite, wo das Maßzeichen das Fenster ist.
Katalog · S6
Der Bildschirm bleibt stehen, das Scrollen blättert durch Schritte.
Katalog · S7
Senkrechtes Scrollen schiebt eine Reihe nach links. Wie ein Aufklappen ohne Klick.
Katalog · S8
Eine Linie wird mit dem Scrollen gezeichnet und verbindet Stationen.
Katalog · S9
Die Schrift bewegt sich nur, wenn die Seite scrollt, nicht von allein.
Neun Varianten für denselben Zweck: Menschen zum nächsten Schritt bringen. Bitte ausprobieren, auch mit der Tastatur.
B1
Der Button folgt dem Zeiger ein paar Pixel.
Nur mit Maus. Tastatur und Touch bekommen einen ruhigen Button.
B2
Die Beschriftung rollt nach oben und wird durch eine Kopie ersetzt.
Die Kopie ist für Screenreader ausgeblendet.
B3
Die Füllung wächst von der Stelle, an der der Zeiger eintritt.
Mit Tastatur wächst sie aus der Mitte.
B4
Der Pfeil verlässt den Button und kommt von der anderen Seite zurück.
Zeigt Richtung: hier geht es weiter.
B5
Ein Lichtstreifen läuft um den Rand.
Läuft nur beim Überfahren und bei Fokus, nie dauerhaft.
Zum Bestätigen halten
B6
Erst nach einer Sekunde Halten wird bestätigt.
Nur für riskante Aktionen. Immer eine Alternative anbieten, die ohne Halten funktioniert.
B7
Die Fläche neigt sich zum Zeiger, ein Glanz wandert mit.
Dekorativ. Der Inhalt bleibt flach und lesbar.
B8
Senden, lädt, gesendet: Der Button erklärt, was passiert.
Der Status wird vorgelesen (aria-live).
B9
Ein Schalter mit federndem Knopf.
Ein echter Schalter (role=switch), bedienbar mit der Leertaste.
So setzen wir Bewegung ein, auf dieser Seite und bei Ihnen.
Wenn ein Effekt nichts erklärt oder lenkt, bleibt er weg.
Tastatur, Touch und Screenreader bekommen dieselben Inhalte. Hover ist nie der einzige Weg.
Bei „Bewegung reduzieren“ im System erscheint die ruhige Fassung. Zusätzlich hält der Schalter „Animationen anhalten“ unten auf jeder Seite alles an.
Nur transform, opacity und clip-path, keine Bibliotheken. Die erste Ansicht dieser Seite bleibt klein.
Kein Element blitzt mehr als dreimal pro Sekunde, nichts läuft von allein weiter.
Kontrast, Fokusrahmen und Klickflächen bleiben in jedem Zustand erfüllt.
Weiter
Erzählen Sie uns, was Ihre Seite können soll. Wir sagen Ihnen, was sich lohnt und was nicht.
