/* ============================================================ ZEORI · Bewegung Scrollerlebnis, Parallax, Einblendungen, Mikroanimationen. Grundsatz: Diese Datei ergaenzt zeori.css, sie ersetzt nichts. Jeder Ausgangszustand haengt an der Klasse .mo auf . Die setzt zeori-motion.js erst, wenn alles bereitsteht, und nimmt sie bei einem Fehler wieder weg. Ohne JavaScript und bei reduzierter Bewegung fehlt .mo, dann ist die Seite vollstaendig sichtbar und steht still. Bewegt werden ausschliesslich transform und opacity. ============================================================ */ :root{ --mo-e:cubic-bezier(.22,.68,.24,1); /* Haupt-Easing, weich auslaufend */ --mo-e-k:cubic-bezier(.4,0,.2,1); /* Mikroanimationen */ --mo-t:.8s; /* Dauer Einblendung */ --mo-t-k:.26s; /* Dauer Mikroanimation */ --mo-stufe:70ms; /* Versatz je Element einer Gruppe */ --mo-weg:26px; /* Slide-Distanz */ } /* ============================================================ 1 · Lenis, sanftes Scrollen ============================================================ */ html.lenis,html.lenis body{height:auto} html.lenis{scroll-behavior:auto} .lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip} .lenis [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-smooth iframe{pointer-events:none} /* ============================================================ 2 · Fortschrittsbalken ============================================================ */ .fortschritt{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;pointer-events:none; background:rgba(180,198,204,.14)} .fortschritt i{display:block;height:100%;background:var(--gold); transform:scaleX(0);transform-origin:0 50%; box-shadow:0 0 12px rgba(224,163,68,.6)} html:not(.mo) .fortschritt{display:none} /* ============================================================ 3 · Einblendungen beim Eintritt in den Sichtbereich ============================================================ */ .mo [data-rv]{ opacity:0; transform:translate3d(0,var(--mo-weg),0); transition:opacity var(--mo-t) var(--mo-e),transform var(--mo-t) var(--mo-e); transition-delay:calc(var(--i,0) * var(--mo-stufe))} .mo [data-rv="gross"]{transform:translate3d(0,44px,0);transition-duration:.95s} .mo [data-rv="skal"] {transform:translate3d(0,34px,0) scale(.965);transition-duration:.95s} .mo [data-rv="links"]{transform:translate3d(-26px,0,0)} .mo [data-rv="rechts"]{transform:translate3d(26px,0,0)} .mo [data-rv="zeile"]{transform:translate3d(0,18px,0);--mo-stufe:54ms} .mo [data-rv].ein{opacity:1;transform:translate3d(0,0,0) scale(1)} /* ============================================================ 4 · Parallax Wichtig fuer die Bildrate: JS schreibt transform direkt auf das Element, nicht in eine Custom Property. Eine Custom Property auf einem Band wuerde bei jedem Bild die Stilberechnung des ganzen Bandes ausloesen. Ein direktes transform beschaeftigt nur den Kompositor. Darum sind die Hintergruende echte Elemente, die zeori-motion.js einhaengt, und keine Pseudoelemente. ============================================================ */ /* Die eingehaengte Ebene. Liegt hinter dem Inhalt, faengt keine Klicks. will-change setzt zeori-motion.js, und nur solange das Band im Bild steht. Dauerhaft waeren es zu viele grosse Texturen auf einmal. */ .ebene{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none; display:block;transform:translate3d(0,0,0)} .mo .band > .in{position:relative;z-index:1} /* Punktraster braucht Ueberstand, sonst reisst das Muster am Rand ab */ .f-nacht > .ebene,.f-nacht2 > .ebene,.f-tief > .ebene, .f-papier > .ebene,.f-papier2 > .ebene{top:-46px;bottom:-46px} .f-nacht > .ebene,.f-tief > .ebene{ background-image:radial-gradient(1.5px 1.5px at 50% 50%,rgba(127,195,212,.26),transparent 60%); background-size:74px 74px} .f-nacht2 > .ebene{ background-image:radial-gradient(1.5px 1.5px at 50% 50%,rgba(232,201,138,.22),transparent 60%); background-size:88px 88px} .f-papier > .ebene,.f-papier2 > .ebene{ background-image:radial-gradient(1.5px 1.5px at 50% 50%,rgba(15,60,85,.14),transparent 60%); background-size:82px 82px} /* Verlaufsebenen laufen weich aus und brauchen keinen Ueberstand */ .f-gold > .ebene{ background-image:radial-gradient(34rem 22rem at 78% 8%,rgba(255,244,222,.45),transparent 62%), radial-gradient(26rem 18rem at 12% 96%,rgba(10,39,51,.10),transparent 62%)} /* --- Hero: drei Ebenen mit unterschiedlichem Tempo ----------- Ebene 1: das Linienraster aus zeori.css, langsamste Bewegung Ebene 2: der Lichtschein, staerkste Bewegung Ebene 3: der Inhalt selbst, leichte Bewegung plus Abtauchen */ .mo .hero{--pa:0px} .mo .hero::before{transform:translate3d(0,var(--pa),0) scale(1.08);will-change:transform} .hero > .ebene{top:-16%;bottom:-16%;left:-8%;right:-8%; background-image: radial-gradient(38rem 24rem at 18% 6%,rgba(127,195,212,.17),transparent 64%), radial-gradient(30rem 22rem at 84% 84%,rgba(224,163,68,.15),transparent 62%)} .hero--hell > .ebene{background-image: radial-gradient(38rem 24rem at 18% 6%,rgba(224,163,68,.22),transparent 64%), radial-gradient(30rem 22rem at 84% 84%,rgba(15,60,85,.10),transparent 62%)} .hero--gold > .ebene{background-image: radial-gradient(38rem 24rem at 18% 6%,rgba(255,244,222,.45),transparent 64%), radial-gradient(30rem 22rem at 84% 84%,rgba(10,39,51,.13),transparent 62%)} .mo .hero .in{will-change:transform,opacity} /* Bilder und Kennzahlen bekommen ihre Ebene nur, solange sie im Bild stehen. Sonst haetten alle Seiten dauerhaft Dutzende Ebenen offen. */ .px-an{will-change:transform} /* ============================================================ 5 · Registerspalte Der Strich zieht sich auf, die Spalte bleibt beim Scrollen stehen. ============================================================ */ .mo .reg{position:relative;border-top-color:transparent;--regs:0} .mo .reg::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ak); transform:scaleX(var(--regs));transform-origin:0 50%; transition:transform .7s var(--mo-e) .12s} .mo .band--rechts .reg::before{transform-origin:100% 50%} .mo .reg.ein{--regs:1} @media(min-width:901px){ .mo .band:not(.band--breit) > .in > .reg{position:sticky;top:104px} } /* ============================================================ 6 · Zaehler ============================================================ */ .kzn b,.grosszahl{font-variant-numeric:tabular-nums} /* ============================================================ 7 · Mikroanimationen ============================================================ */ .kn{transition:background-color .16s var(--mo-e-k),border-color .16s var(--mo-e-k), color .16s var(--mo-e-k),transform var(--mo-t-k) var(--mo-e-k),box-shadow var(--mo-t-k) var(--mo-e-k)} .kn:active{transform:translate3d(0,0,0)} @media(hover:hover){ .kn-voll:hover{transform:translate3d(0,-2px,0);box-shadow:0 14px 28px -14px rgba(224,163,68,.8)} .kn-leer:hover{transform:translate3d(0,-2px,0)} .f-gold .kn-voll:hover{box-shadow:0 14px 28px -14px rgba(10,39,51,.75)} .zelle,.paar,.karte,.stufe,.crew-m,.wege > div,.lb-st,.lb-md,.lb-kern,.wkz li,.drei > div,.akk details{ transition:transform var(--mo-t-k) var(--mo-e-k),background-color var(--mo-t-k) var(--mo-e-k), box-shadow var(--mo-t-k) var(--mo-e-k)} .f-nacht .zelle:hover,.f-nacht2 .zelle:hover,.f-tief .zelle:hover, .wkz li:hover,.f-nacht .drei > div:hover,.f-nacht2 .drei > div:hover,.f-tief .drei > div:hover{ background-color:rgba(127,195,212,.055)} .f-papier .zelle:hover,.f-papier2 .zelle:hover,.f-gold .zelle:hover, .f-papier .drei > div:hover,.f-papier2 .drei > div:hover{background-color:rgba(15,60,85,.045)} .karte:hover,.crew-m:hover,.lb-st:hover,.lb-md:hover,.lb-kern:hover{ transform:translate3d(0,-4px,0);box-shadow:0 22px 46px -26px rgba(10,39,51,.6)} .stufe:hover,.paar:hover,.wege > div:hover{transform:translate3d(6px,0,0)} .folge li .fz{transition:transform var(--mo-t-k) var(--mo-e-k)} .folge li:hover .fz{transform:translate3d(0,-3px,0) scale(1.06)} } /* ============================================================ 8 · Reduzierte Bewegung: alles sichtbar, nichts bewegt sich ============================================================ */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} [data-rv]{opacity:1!important;transform:none!important;transition:none!important} [data-px],.ebene,.mo .hero .in,.mo .hero::before{ transform:none!important;opacity:1!important;will-change:auto!important} .mo .reg::before{transform:scaleX(1)!important;transition:none!important} .fortschritt{display:none} .kn,.zelle,.paar,.karte,.stufe,.crew-m,.wege > div,.lb-st,.lb-md,.wkz li,.drei > div{ transition:none!important;transform:none!important} } /* ============================================================ 9 · Das Produktivitaets-Diagramm Vier Ebenen, die nacheinander kommen, sobald die Abbildung in den Sichtbereich faehrt. Sie haengen an der Klasse .ein, die das bestehende Einblendesystem ohnehin auf figure.fig setzt. Es braucht dafuer keine einzige Zeile JavaScript. 1 Die Achsen zeichnen sich, senkrecht von unten, waagrecht von links. Beide tragen pathLength="1", damit die Strich- laenge unabhaengig von den echten Koordinaten stimmt. 2 Ein Wischer deckt die beiden Trendlinien von links nach rechts auf. Ueber einen Wischer statt ueber stroke-dashoffset, weil die graue Linie ihr Punktmuster behalten muss: eine Strichanimation wuerde genau dieses Muster ueberschreiben. 3 Die beiden Endpunkte springen an, wenn die Linien dort ankommen. 4 Die Beschriftungen blenden zuletzt ein. Bewegt werden nur transform, opacity und stroke-dashoffset. ============================================================ */ /* --- 1 Achsen --- */ .mo figure.fig .fig-achse{ stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset .7s cubic-bezier(.22,.68,.24,1)} .mo figure.fig.ein .fig-achse{stroke-dashoffset:0} .mo figure.fig.ein .fig-achse-y{transition-delay:.05s} .mo figure.fig.ein .fig-achse-x{transition-delay:.2s} /* --- 2 Wischer ueber die Trendlinien --- */ .mo figure.fig .fig-wischer{ transform:scaleX(0);transform-origin:44px 120px; transition:transform 1.5s cubic-bezier(.25,.72,.3,1) .45s} .mo figure.fig.ein .fig-wischer{transform:scaleX(1)} /* --- 3 Endpunkte --- */ .mo figure.fig .fig-punkt{ transform:scale(0);transform-box:fill-box;transform-origin:50% 50%; transition:transform .5s cubic-bezier(.34,1.4,.5,1)} .mo figure.fig.ein .fig-punkt-mit{transform:scale(1);transition-delay:1.5s} .mo figure.fig.ein .fig-punkt-ohne{transform:scale(1);transition-delay:1.7s} /* --- 4 Beschriftungen --- */ .mo figure.fig .fig-text{ opacity:0;transition:opacity .6s cubic-bezier(.22,.68,.24,1)} .mo figure.fig.ein .fig-text-achse{opacity:1;transition-delay:.35s} .mo figure.fig.ein .fig-text-mit{opacity:1;transition-delay:1.55s} .mo figure.fig.ein .fig-text-ohne{opacity:1;transition-delay:1.75s} @media(prefers-reduced-motion:reduce){ .fig-achse{stroke-dashoffset:0!important} .fig-wischer{transform:none!important} .fig-punkt{transform:none!important} .fig-text{opacity:1!important} .fig-achse,.fig-wischer,.fig-punkt,.fig-text{transition:none!important} }