Kachel-Effekte gelten jetzt auf der ganzen Seite, nicht nur intern
Neigung, Glanzstreifen und Lichtkante lagen bisher nur im Verwaltungsbereich. Sie stehen jetzt im Grundsystem und gelten damit ueberall: Startseite, Leistungen, Ablauf, Portfolio, "Ueber mich", Kundenportal. Die Farbe kommt aus --wd-lumen. Jede Kachel bringt die ohnehin mit (Token-Regel 02), der Verwaltungsbereich ueberschreibt sie mit der Farbe des jeweiligen Bereichs. Dadurch braucht es keine einzige Sonderregel. DREI FEHLER, DIE DIE REGRESSION GEFUNDEN HAT 1. Die Einblendung hat die Neigung geloescht. ".wd-bereit .wd-auf.wd-sichtbar" setzt "transform: none" und hat mit drei Klassen die hoehere Gewichtung. Sichtbar war das nur auf Seiten, deren Kacheln eine Einblendung tragen: Auf "ablauf" kippte die Kachel, auf "leistungen" nicht -- und der Wert kam in beiden Faellen korrekt an. Die Einblendung nutzt jetzt "translate". Das ist zum dritten Mal dieselbe Falle nach Buehne und Kacheln im Verwaltungsbereich. Merksatz: Wer "transform" animiert oder zuruecksetzt, blockiert es fuer alles andere. 2. Die Perspektive hat die Buehne zerlegt. "perspective" auf dem Abschnitt macht diesen zum Bezugsrahmen fuer position:fixed in seinem Inneren -- genau wie "transform" oder "filter". Die bildschirmfuellende Buehne im Verwaltungsbereich lag danach nicht mehr am Fenster, sondern am Abschnitt: gemessen 472 statt 900 Punkte Hoehe. Die Perspektive steckt jetzt als Funktion im transform der Kachel selbst. Der gemeinsame Fluchtpunkt benachbarter Kacheln entfaellt damit, was bei hoechstens fuenf Grad niemand sieht. 3. Kachel-Neigung und Bild-Parallaxe haben sich aufgeschaukelt. Die kippende Kachel schiebt das Bild unter dem Zeiger weg, der landet dadurch auf einem Nachbarelement, das Bild springt zurueck auf null -- und beim naechsten Zucken von vorne. Messbar war das als "an einer Ecke sauber, an der anderen dauerhaft 0". Klare Arbeitsteilung: Ein Bild INNERHALB einer Kachel bekommt nur den Zoom, die Kachel kippt darum herum. Freistehende Bilder behalten ihre eigene Gegenbewegung. NEUER DURCHLAUF ueber alle Seiten (pruef-bewegung.mjs) Weil die Effekte im Grundsystem liegen, reicht eine Pruefung auf einer Seite nicht: Genau so ist Fehler 1 entstanden und waere unbemerkt geblieben. Der Durchlauf geht sechs Seiten ab und prueft je Seite Neigung, Winkel unter neun Grad, Zuruecksetzen beim Verlassen und Skriptfehler. Zwei Stolpersteine stecken darin dokumentiert: Die Startseite legt beim Laden einen Vorhang ueber alles (wer zu frueh misst, trifft den Vorhang statt der Kachel), und eine Portfolio-Kachel ist ueber 1400 Punkte hoch -- ein fester Anteil ihrer Hoehe landet ausserhalb des Bildschirms. Geprueft: 291 Pruefungen gruen (Bewegung 27, Portfolio 19, Verwaltung 62, CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54). Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+124
-4
@@ -624,6 +624,97 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
.wd-tag--indigo { background: rgb(var(--wd-indigo-rgb) / .16); border-color: rgb(var(--wd-indigo-rgb) / .40); color: rgb(var(--wd-chrome-rgb)); }
|
||||
.wd-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
|
||||
|
||||
/* =====================================================================
|
||||
KACHELN ALS GESCHLIFFENE GLASPLATTEN
|
||||
|
||||
Was zuerst nur im Verwaltungsbereich stand, gilt jetzt fuer jede
|
||||
Kachel auf jeder Seite. Eine Sonderloesung fuer einen Bereich waere
|
||||
beim naechsten neuen Abschnitt wieder vergessen worden -- und die
|
||||
Seite saehe an zwei Stellen unterschiedlich aus, ohne dass es einen
|
||||
Grund dafuer gaebe.
|
||||
|
||||
Die Farbe kommt aus --wd-lumen. Jede Kachel bringt die schon mit
|
||||
(Token-Regel 02: Kachelfarbe steuert Lumenfarbe), der
|
||||
Verwaltungsbereich ueberschreibt sie mit der Farbe des Bereichs.
|
||||
Dadurch braucht es hier keine einzige Sonderregel.
|
||||
===================================================================== */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
|
||||
/* Die Perspektive steckt in der Kachel selbst, NICHT an einem
|
||||
Elternteil.
|
||||
|
||||
Der naheliegende Weg waere "perspective" auf dem Abschnitt -- dann
|
||||
teilen benachbarte Kacheln einen gemeinsamen Fluchtpunkt. Genau das
|
||||
hatte aber eine boese Nebenwirkung: "perspective" macht ein Element
|
||||
zum Bezugsrahmen fuer position:fixed in seinem Inneren, exakt wie
|
||||
"transform" oder "filter". Die bildschirmfuellende Buehne im
|
||||
Verwaltungsbereich lag danach nicht mehr am Fenster, sondern am
|
||||
Abschnitt -- gemessen 472 statt 900 Punkte Hoehe.
|
||||
|
||||
Als Funktion im transform gilt die Perspektive nur fuer diese eine
|
||||
Kachel. Der gemeinsame Fluchtpunkt entfaellt damit, was bei
|
||||
hoechstens fuenf Grad Neigung niemand sieht. */
|
||||
.wd-karte {
|
||||
transform-style: preserve-3d;
|
||||
transform:
|
||||
perspective(1400px)
|
||||
rotateX(calc(var(--wd-ny, 0) * -5deg))
|
||||
rotateY(calc(var(--wd-nx, 0) * 5deg));
|
||||
transition:
|
||||
transform .32s cubic-bezier(.2,.8,.3,1),
|
||||
box-shadow .32s ease;
|
||||
}
|
||||
/* Beim Ueberfahren kommt die Kachel dem Betrachter entgegen und wirft
|
||||
einen laengeren Schatten. Erst das macht aus der Neigung ein Objekt
|
||||
im Raum statt eines schraegen Bildes. */
|
||||
.wd-karte:hover {
|
||||
transform:
|
||||
perspective(1400px)
|
||||
rotateX(calc(var(--wd-ny, 0) * -5deg))
|
||||
rotateY(calc(var(--wd-nx, 0) * 5deg))
|
||||
translateZ(20px);
|
||||
box-shadow:
|
||||
0 40px 84px -34px rgb(0 0 0 / .92),
|
||||
0 0 52px -18px rgb(var(--wd-lumen) / .38),
|
||||
inset 0 1px 0 rgb(var(--wd-lumen) / .26);
|
||||
}
|
||||
|
||||
/* Ueberschriften stehen weiter vorn als Fliesstext. Dadurch entsteht
|
||||
beim Neigen echte Staffelung statt einer flachen Ebene, die sich
|
||||
mitdreht -- und der Text bleibt fast senkrecht zum Auge, also
|
||||
scharf, obwohl die Flaeche unter ihm schraeg liegt. */
|
||||
.wd-karte > * { transform: translateZ(14px); }
|
||||
.wd-karte h2, .wd-karte h3 { transform: translateZ(28px); }
|
||||
|
||||
|
||||
/* Ein schmales Licht, das ueber die Platte laeuft und mit der Neigung
|
||||
wandert. */
|
||||
.wd-karte::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
calc(112deg + var(--wd-nx, 0) * 26deg),
|
||||
transparent 34%,
|
||||
rgb(255 255 255 / .06) 46%,
|
||||
rgb(var(--wd-lumen) / .14) 50%,
|
||||
rgb(255 255 255 / .06) 54%,
|
||||
transparent 66%);
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
.wd-karte:hover::before { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wd-karte, .wd-karte:hover { transform: none; transition: none; }
|
||||
.wd-karte > *, .wd-karte h2, .wd-karte h3 { transform: none; }
|
||||
.wd-karte::before { display: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
BILDER, DIE SICH BEWEGEN
|
||||
|
||||
@@ -671,6 +762,23 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
.wd-projekt-bild:hover {
|
||||
--wd-bildzoom: 1.055;
|
||||
}
|
||||
|
||||
/* AUSNAHME: Bilder INNERHALB einer Kachel bekommen nur den Zoom.
|
||||
|
||||
Die Kachel kippt bereits, das Bild bewegt sich also ohnehin mit.
|
||||
Beides zusammen schaukelt sich auf: Die kippende Kachel schiebt das
|
||||
Bild unter dem Zeiger weg, der landet auf einem Nachbarelement, das
|
||||
Bild springt zurueck auf null -- und beim naechsten Zucken von
|
||||
vorne. Beim Bauen sass der Wert an einer Ecke deshalb dauerhaft
|
||||
auf 0, waehrend er an der anderen sauber lief.
|
||||
|
||||
Diese Regel steht bewusst ganz am Ende der Bildregeln: Sie hat
|
||||
dieselbe Gewichtung wie ".pfo-bild" und gewinnt nur, weil sie
|
||||
spaeter kommt. Wird sie nach oben verschoben, ist der Aufschaukel-
|
||||
Effekt sofort zurueck. */
|
||||
.wd-karte img {
|
||||
transform: scale(var(--wd-bildzoom, 1));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -925,12 +1033,24 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
Skriptfehler bleibt dadurch ALLES lesbar — der häufigste schwere Fehler
|
||||
bei Scroll-Animationen ist eine dauerhaft unsichtbare Seite.
|
||||
--------------------------------------------------------------------- */
|
||||
/* Die Einblendung nutzt "translate" als EIGENE Eigenschaft, nicht
|
||||
"transform".
|
||||
|
||||
Grund: Kacheln neigen sich beim Ueberfahren, und das laeuft ueber
|
||||
"transform". Diese Regel hier hat mit drei Klassen die hoehere
|
||||
Spezifitaet -- ihr "transform: none" hat die Neigung stillschweigend
|
||||
geloescht. Sichtbar war das nur auf Seiten, deren Kacheln ein
|
||||
.wd-auf tragen: Auf "ablauf" kippte die Kachel, auf "leistungen"
|
||||
nicht, und der Wert kam in beiden Faellen korrekt an.
|
||||
|
||||
"translate" wird VOR "transform" angewendet. Beide koennen sich so
|
||||
nicht mehr in die Quere kommen. */
|
||||
.wd-bereit .wd-auf {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity var(--wd-zeit-lang) ease, transform var(--wd-zeit-lang) cubic-bezier(.22, 1, .36, 1);
|
||||
translate: 0 18px;
|
||||
transition: opacity var(--wd-zeit-lang) ease, translate var(--wd-zeit-lang) cubic-bezier(.22, 1, .36, 1);
|
||||
}
|
||||
.wd-bereit .wd-auf.wd-sichtbar { opacity: 1; transform: none; }
|
||||
.wd-bereit .wd-auf.wd-sichtbar { opacity: 1; translate: none; }
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
14. KOPF- UND FUSSZEILE des Webdesign-Bereichs
|
||||
@@ -1162,7 +1282,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
}
|
||||
/* Wichtig: die Einblend-Elemente müssen dann SOFORT sichtbar sein,
|
||||
nicht "unsichtbar mit 0s Übergang". */
|
||||
.wd-bereit .wd-auf { opacity: 1; transform: none; }
|
||||
.wd-bereit .wd-auf { opacity: 1; translate: none; transform: none; }
|
||||
.wd-btn:hover, a.wd-karte:hover, .wd-karte--klickbar:hover { transform: none; }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user