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:
2026-08-25 12:12:31 +02:00
co-authored by Claude Opus 5
parent 76aea6ac3f
commit e4216a2c7a
11 changed files with 328 additions and 18 deletions
+14 -13
View File
@@ -210,25 +210,26 @@ srv.listen(4403, async () => {
versatz: getComputedStyle(e).transform,
}));
pruefe("das Bild reagiert auf den Zeiger",
linksOben.bx < -0.4 && rechtsUnten.bx > 0.4,
linksOben.bx + " -> " + rechtsUnten.bx);
/* Die Portfolio-Bilder stecken in einer Kachel. Dort bewegt sich die
KACHEL, das Bild bekommt nur den Zoom -- 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. Genau das war hier messbar: an einer Ecke sauber, an der
anderen dauerhaft 0.
/* Die Richtung ist der Kern: Bewegt sich das Bild MIT dem Zeiger,
wirkt es wie ein verrutschter Aufkleber. Nur die Gegenbewegung
liest das Auge als Tiefe hinter dem Rahmen. */
Geprueft wird deshalb die Arbeitsteilung, nicht mehr die
Bildverschiebung. */
const holeX = (m) => parseFloat(m.slice(m.indexOf("(") + 1, -1).split(",")[4]);
const xLinks = holeX(linksOben.versatz);
const xRechts = holeX(rechtsUnten.versatz);
pruefe("und wandert GEGEN die Zeigerrichtung",
xLinks > 0 && xRechts < 0,
pruefe("das Bild in der Kachel verschiebt sich NICHT selbst",
Math.abs(xLinks) < 1 && Math.abs(xRechts) < 1,
xLinks.toFixed(1) + "px / " + xRechts.toFixed(1) + "px");
/* Klein halten: Ein grosser Ausschnittswechsel beim blossen
Vorbeifahren waere ein Bildsprung, kein Effekt. */
pruefe("der Ausschlag bleibt klein",
Math.abs(xLinks) <= 18 && Math.abs(xRechts) <= 18,
Math.max(Math.abs(xLinks), Math.abs(xRechts)).toFixed(1) + "px");
const kachel = await seite.locator(".pfo-projekt").first()
.evaluate((e) => getComputedStyle(e).transform);
pruefe("dafuer kippt die Kachel um das Bild herum",
kachel.startsWith("matrix3d"), kachel.slice(0, 24) + "...");
const zoom = parseFloat(rechtsUnten.versatz.slice(
rechtsUnten.versatz.indexOf("(") + 1, -1).split(",")[0]);