/* ========================================================================== LG Betriebsgesundheit — Bewegungsebene ========================================================================== Diese Datei enthält ausschließlich Bewegung: das Intro beim Laden, das Einblenden beim Scrollen und die Hover-Zustände. Aussehen und Layout stehen weiterhin vollständig in css/stil.css. Sie wird NACH stil.css geladen und gewinnt deshalb bei gleicher Spezifität. Das Skript assets/js/bewegung.js setzt nur ein einziges Attribut (data-bewegung); alle Zeitwerte stehen hier. Inhalt 01 Zeitvariablen 02 Intro beim Laden (nur Hero) 03 Einblenden beim Scrollen 04 Hover 05 Reduzierte Bewegung und Druck FARBREGEL: #00E08F hat auf hellem Grund nur 1,6:1. Kein Zustand in dieser Datei färbt eine Fläche in der Signalfarbe ein oder setzt Text darauf — Hover arbeitet ausschließlich mit Schatten und einer Anhebung um wenige Pixel. Wer das ändert, muss Text darauf in --ink setzen (9,5:1), niemals in Weiß (1,7:1). ========================================================================== */ /* 01 Zeitvariablen ======================================================= Zentral, damit sich das Tempo an einer Stelle nachziehen lässt. stil.css greift für seine bestehenden Übergänge ebenfalls darauf zu, dort jeweils mit Rückfallwert, damit stil.css allein gültig bleibt. */ :root { --bewegung-schnell: .18s; /* Hover und Fokus */ --bewegung-mittel: .45s; /* Intro-Elemente im Hero */ --bewegung-lang: .6s; /* Einblenden beim Scrollen */ /* Ruhige Ausklingkurve: schneller Start, langes Auslaufen. Kein Überschwingen — die Seite soll nicht federn. */ --bewegung-kurve: cubic-bezier(.22, .61, .36, 1); /* Wegstrecke beim Einblenden. Bewusst klein: der Versatz soll den Blick führen, nicht das Layout in Bewegung setzen. */ --bewegung-versatz: 14px; /* Staffelschritt innerhalb einer Gruppe. --bewegung-takt ist der Grundwert; zwei Gruppen laufen bewusst ruhiger, weil ihre Elemente größer sind und nebeneinander stehen. Beide leiten sich vom Grundwert ab, damit eine Änderung daran alles mitnimmt. --bewegung-takt-gruppe ist der Wert, den die Regeln weiter unten tatsächlich lesen. Er wird an der jeweiligen Gruppe überschrieben und erbt von dort an die Kinder. */ --bewegung-takt: .07s; --bewegung-takt-zielrichtung: calc(var(--bewegung-takt) * 2); /* .14s */ --bewegung-takt-leistungen: calc(var(--bewegung-takt) * 2.6); /* .182s */ --bewegung-takt-gruppe: var(--bewegung-takt); } /* 02 Intro beim Laden ==================================================== Betrifft ausschließlich den Hero. Ein einziger Ablauf, gemeinsam mit der Ringanimation des Verbund-Diagramms (stil.css, Abschnitt 08). Deren Zeitplan steht fest und wird hier NICHT verändert, sondern umspielt: 0,00 s Ring beginnt sich zu zeichnen (.65 s lang) 0,20 s Wortmarke LG blendet ein 0,65 s Ring steht, erste Scheibe kommt 0,78 s zweite Scheibe ... bis 1,17 s fünfte Scheibe beginnt 1,50 s Diagramm steht vollständig Die Textspalte läuft dem Ring voraus (0,05 – 0,42 s), weil sie zuerst gelesen wird. Danach ist das Intro zu Ende. Das Kennzahlenband gehört ausdrücklich NICHT dazu. Es liegt auf den meisten Bildschirmen unter dem Falz und blendet deshalb wie jede andere Sektion beim Scrollen ein (Abschnitt 03) — eine Bewegung, die niemand sieht, ist keine. Rein über CSS, ohne Skript — deshalb kann hier nichts unsichtbar hängenbleiben, auch wenn das JavaScript nie lädt. */ @keyframes bewegung-ein { from { opacity: 0; transform: translateY(var(--bewegung-versatz)); } to { opacity: 1; transform: none; } } .hero .kicker-pille, .hero h1, .hero__text, .hero__knoepfe, .merkmalzeile { animation: bewegung-ein var(--bewegung-mittel) var(--bewegung-kurve) both; } .hero .kicker-pille { animation-delay: .05s; } .hero h1 { animation-delay: .12s; } .hero__text { animation-delay: .22s; } .hero__knoepfe { animation-delay: .32s; } .merkmalzeile { animation-delay: .42s; } /* 03 Einblenden beim Scrollen ============================================ Das Attribut data-bewegung setzt ausschließlich assets/js/bewegung.js. Ohne Skript trägt kein Element das Attribut und alles steht sofort sichtbar da — das ist die Grundstellung, nicht der Sonderfall. Das Skript versteckt außerdem nur, was beim Laden unterhalb des sichtbaren Bereichs liegt. Was schon zu sehen ist, bleibt unberührt und kann deshalb auch nicht kurz aufblitzen. Der Versatz läuft über translate, nicht über transform. Grund: der Hover-Zustand weiter unten hebt Karten über transform an. Stünden beide auf derselben Eigenschaft, würde der eine Zustand den anderen zurücksetzen. Als eigenständige Eigenschaft legt sich translate dagegen sauber unter das transform des Hovers. Browser ohne translate-Unterstützung lassen die Zeile fallen und blenden nur die Deckkraft ein — der Versatz fehlt, mehr nicht. */ [data-bewegung="vorher"] { opacity: 0; translate: 0 var(--bewegung-versatz); } [data-bewegung="danach"] { opacity: 1; translate: none; transition: opacity var(--bewegung-lang) var(--bewegung-kurve), translate var(--bewegung-lang) var(--bewegung-kurve); } /* Staffelung innerhalb einer Gruppe. Den Platz in der Gruppe vergibt das Skript als data-bewegung-takt — nicht über :nth-child, weil ein Einzelblock sonst allein deshalb verzögert würde, weil er zufällig das zweite Kind seines Elternelements ist. Die Verzögerung sitzt am Übergang, nicht an einer Animation, und greift deshalb erst, wenn das Skript die Gruppe auf "danach" setzt. Bei fünf Schritten ist Schluss: eine Gruppe aus sieben Fragen liefe sonst spürbar nach. */ /* Die beiden Gruppen mit den größeren, nebeneinanderstehenden Elementen setzen ihren eigenen Takt. Er wird hier an der Gruppe gesetzt und von den Kindern geerbt — die Regeln darunter lesen ihn, ohne die Gruppe zu kennen. Merkmalskarten bleiben beim Grundwert. */ .einzahlen { --bewegung-takt-gruppe: var(--bewegung-takt-zielrichtung); } .karten { --bewegung-takt-gruppe: var(--bewegung-takt-leistungen); } [data-bewegung="danach"][data-bewegung-takt="2"] { transition-delay: var(--bewegung-takt-gruppe); } [data-bewegung="danach"][data-bewegung-takt="3"] { transition-delay: calc(var(--bewegung-takt-gruppe) * 2); } [data-bewegung="danach"][data-bewegung-takt="4"] { transition-delay: calc(var(--bewegung-takt-gruppe) * 3); } [data-bewegung="danach"][data-bewegung-takt="5"] { transition-delay: calc(var(--bewegung-takt-gruppe) * 4); } /* 04 Hover =============================================================== Nur Schatten und eine Anhebung um wenige Pixel. Keine Farbwechsel, keine Vergrößerung, kein Rahmen in der Signalfarbe — siehe Farbregel im Kopf dieser Datei. */ /* Karten können beides: einblenden und auf Hover reagieren. Beide Zustände teilen sich EINE transition-Deklaration. Das ist keine Stilfrage, sondern nötig: transition ist eine Kurzschreibweise. Eine zweite Deklaration auf demselben Element ersetzt die erste vollständig, sie ergänzt sie nicht. Zwei getrennte Regeln — eine fürs Einblenden, eine für den Hover — hoben sich deshalb gegenseitig auf, und das Einblenden sprang ohne Übergang. Steht bewusst außerhalb der Hover-Abfrage weiter unten: eingeblendet wird auch auf Touch-Geräten. Die kürzere Dauer für box-shadow und transform gilt dem Hover, die längere für opacity und translate dem Einblenden. Beide laufen nie gleichzeitig. */ .karte, .merkmal { transition: opacity var(--bewegung-lang) var(--bewegung-kurve), translate var(--bewegung-lang) var(--bewegung-kurve), box-shadow var(--bewegung-schnell) ease, transform var(--bewegung-schnell) ease; } /* Nur für Geräte mit echtem Zeiger: auf Touch bliebe der Hover-Zustand nach dem Tippen stehen. */ @media (hover: hover) and (pointer: fine) { .karte:hover { transform: translateY(-2px); } /* Die drei Merkmalskarten hatten bisher gar keinen Hover-Zustand. */ .merkmal:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); } } /* 05 Reduzierte Bewegung und Druck ======================================= stil.css kürzt bereits global die Dauern. Das reicht hier nicht: die Verzögerungen im Intro blieben stehen und hielten den Hero über eine Sekunde leer. Deshalb hier alles abschalten, mit !important abgesichert gegen jede spätere Regel. */ @media (prefers-reduced-motion: reduce) { .hero .kicker-pille, .hero h1, .hero__text, .hero__knoepfe, .merkmalzeile, [data-bewegung] { animation: none !important; transition: none !important; animation-delay: 0s !important; transition-delay: 0s !important; opacity: 1 !important; transform: none !important; translate: none !important; } } /* Im Druck darf nichts unsichtbar sein: was beim Drucken noch nicht eingeblendet war, käme sonst als leere Fläche aufs Papier. */ @media print { [data-bewegung] { opacity: 1 !important; transform: none !important; translate: none !important; } }