Verwaltung: die Kacheln werden zu geschliffenen Glasplatten
Buehne und Zeigerlicht bleiben unveraendert. Diesmal geht es nur um die Kacheln selbst. SIE LIEGEN IM RAUM, NICHT AUF DER SEITE Faehrt der Zeiger darueber, neigt sich die Kachel ihm entgegen -- als wuerde man eine echte Glasplatte kippen. Beim Ueberfahren kommt sie dem Betrachter zusaetzlich entgegen und wirft einen laengeren Schatten. Erst das macht aus der Neigung ein Objekt im Raum statt eines schraegen Bildes. Der Ausschlag liegt bei hoechstens 7 Grad (gemessen 6,7). Alles darueber verzerrt die Schrift sichtbar, und auf diesen Kacheln wird gearbeitet, nicht nur geschaut. DER INHALT STEHT VOR DER FLAECHE Ueberschriften weiter vorn als Fliesstext. Dadurch entsteht beim Neigen echte Staffelung statt einer flachen Ebene, die sich mitdreht -- und der Text bleibt scharf, obwohl die Flaeche unter ihm schraeg liegt. DAZU EIN GLANZSTREIFEN UND UNGLEICHE ECKEN Ein schmales Licht laeuft ueber die Platte und wandert mit der Neigung. Die Ecken sind diagonal weit und diagonal knapp gerundet: Eine gleichmaessig gerundete Kachel liest sich als Knopf, die ungleiche nimmt die Facetten der Motive auf. DIE FALLE, DIE ICH SCHON KANNTE Die Auftauch-Animation der Kacheln nutzte "transform" und haelt ihren Endwert fest -- eine Animation schlaegt jede normale Regel, die Neigung waere also wirkungslos geblieben. Genau dieselbe Falle wie zuvor bei der Buehne, nur eine Ebene tiefer. Die Animation nutzt jetzt "translate" und "scale" als eigene Eigenschaften; "transform" bleibt der Neigung vorbehalten. DREI FEHLER IM TEST, NICHT IN DER SEITE - Der Staffelungstest raeumte die Probekachel leer. Danach fehlten ihr Ueberschrift und Text, und der Neigungstest stuerzte ab, weil er auf ein nicht vorhandenes Element zugriff. Er hat jetzt einen eigenen Behaelter. - Die Winkelrechnung las die "3" aus "matrix3d" als erste Zahl mit und verschob damit jeden Eintrag um eine Stelle. Der Winkel kam als 0,4 Grad heraus statt als 6,7 -- die Pruefung "flach genug" waere also immer gruen gewesen, egal wie stark die Kachel kippt. - Der Schwellwert fuer den senkrechten Ausschlag war zu streng. Eine flache Kachel ist nur gut 100 Punkte hoch; 20 Punkte vom Rand liegen dort schon fast in der Mitte. Geprueft wird jetzt der Vorzeichenwechsel statt eines festen Betrags. Bei prefers-reduced-motion ist alles davon aus: keine Neigung, keine Tiefe, kein Glanz. Ohne feinen Zeiger entfaellt es ebenfalls -- auf einem Telefon gibt es kein Schweben. Geprueft: 260 Pruefungen gruen (Verwaltung 62, Portfolio 15, 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
+1
-1
@@ -34,7 +34,7 @@
|
||||
Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
|
||||
Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
|
||||
Stand fest. */
|
||||
const CACHE_NAME = "dogfather-webdesign-v40";
|
||||
const CACHE_NAME = "dogfather-webdesign-v41";
|
||||
|
||||
/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
|
||||
HTML-Datei in dieser Liste. */
|
||||
|
||||
+150
-10
@@ -476,9 +476,16 @@
|
||||
Nur die ersten acht bekommen einen Versatz. Bei einer langen Liste
|
||||
wuerde die letzte Kachel sonst spuerbar spaeter kommen -- das
|
||||
fuehlt sich nicht mehr elegant an, sondern langsam. */
|
||||
/* Die Auftauch-Animation nutzt "translate" und "scale" als EIGENE
|
||||
Eigenschaften, nicht "transform".
|
||||
|
||||
Grund: Die raeumliche Neigung weiter unten braucht "transform" fuer
|
||||
sich. Eine Animation haelt ihren Endwert fest und schlaegt jede
|
||||
normale Regel -- die Neigung waere sonst wirkungslos. Dieselbe
|
||||
Falle wie bei der Buehne, nur eine Ebene tiefer. */
|
||||
@keyframes vw-kachel-auf {
|
||||
from { opacity: 0; transform: translateY(14px) scale(.985); }
|
||||
to { opacity: 1; transform: none; }
|
||||
from { opacity: 0; translate: 0 14px; scale: .985; }
|
||||
to { opacity: 1; translate: none; scale: 1; }
|
||||
}
|
||||
#vw-bereich .wd-karte {
|
||||
animation: vw-kachel-auf .5s cubic-bezier(.2,.8,.3,1) both;
|
||||
@@ -553,23 +560,100 @@
|
||||
rgb(var(--vw-farbe) / .12) 42%,
|
||||
transparent 72%);
|
||||
}
|
||||
/* Beim Ueberfahren hebt sich die Kachel minimal an. Sehr wenig --
|
||||
es soll sich anfuehlen, als reagiere sie, nicht als huepfe sie. */
|
||||
}
|
||||
|
||||
/* ---------- DIE KACHEL ALS GESCHLIFFENE GLASPLATTE ----------
|
||||
|
||||
Sie liegt nicht flach auf der Seite, sondern im Raum. Faehrt der
|
||||
Zeiger darueber, neigt sie sich ihm entgegen -- als wuerde man eine
|
||||
echte Glasplatte kippen.
|
||||
|
||||
Der Ausschlag ist bewusst sehr klein (hoechstens 7 Grad). Alles
|
||||
darueber verzerrt die Schrift sichtbar, und auf diesen Kacheln wird
|
||||
gearbeitet, nicht nur geschaut. Genau deshalb kippt auch nur die
|
||||
Kachel, waehrend der Text darin durch translateZ wieder nach vorn
|
||||
geholt wird: Er steht dadurch fast senkrecht zum Auge und bleibt
|
||||
scharf, obwohl die Flaeche unter ihm schraeg liegt. */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
#vw-bereich {
|
||||
/* Ohne Perspektive gaebe es keine Tiefe -- die Neigung saehe aus
|
||||
wie ein platt gedruecktes Parallelogramm. */
|
||||
perspective: 1400px;
|
||||
}
|
||||
#vw-bereich .wd-karte {
|
||||
transition: transform var(--wd-zeit, .22s) ease, box-shadow var(--wd-zeit, .22s) ease;
|
||||
transform-style: preserve-3d;
|
||||
transform:
|
||||
rotateX(calc(var(--vw-ny, 0) * -7deg))
|
||||
rotateY(calc(var(--vw-nx, 0) * 7deg))
|
||||
translateZ(0);
|
||||
transition:
|
||||
transform .32s cubic-bezier(.2,.8,.3,1),
|
||||
box-shadow .32s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
/* Beim Ueberfahren kommt die Kachel dem Betrachter entgegen und
|
||||
wirft einen laengeren Schatten -- das erst macht aus der Neigung
|
||||
ein Objekt im Raum statt eines schraegen Bildes. */
|
||||
#vw-bereich .wd-karte:hover {
|
||||
transform: translateY(-2px);
|
||||
transform:
|
||||
rotateX(calc(var(--vw-ny, 0) * -7deg))
|
||||
rotateY(calc(var(--vw-nx, 0) * 7deg))
|
||||
translateZ(32px);
|
||||
box-shadow:
|
||||
0 30px 70px -28px rgb(0 0 0 / .9),
|
||||
0 0 40px -14px rgb(var(--vw-farbe) / .40),
|
||||
inset 0 1px 0 rgb(var(--vw-farbe) / .26);
|
||||
0 44px 90px -34px rgb(0 0 0 / .95),
|
||||
0 0 60px -18px rgb(var(--vw-farbe) / .45),
|
||||
inset 0 1px 0 rgb(var(--vw-farbe) / .30);
|
||||
}
|
||||
|
||||
/* Der Inhalt steht vor der Flaeche. Ueberschriften weiter vorn als
|
||||
Fliesstext -- dadurch entsteht beim Neigen echte Staffelung
|
||||
statt einer flachen Ebene, die sich mitdreht. */
|
||||
#vw-bereich .wd-karte > * { transform: translateZ(18px); }
|
||||
#vw-bereich .wd-karte h2,
|
||||
#vw-bereich .wd-karte h3 { transform: translateZ(34px); }
|
||||
|
||||
/* DER GLANZSTREIFEN.
|
||||
|
||||
Ein schmales Licht, das ueber die Platte laeuft und mit der
|
||||
Neigung wandert. Es sitzt im ::before, weil ::after schon den
|
||||
Lichtkegel traegt. */
|
||||
#vw-bereich .wd-karte::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
calc(112deg + var(--vw-nx, 0) * 26deg),
|
||||
transparent 34%,
|
||||
rgb(255 255 255 / .07) 46%,
|
||||
rgb(var(--vw-farbe) / .16) 50%,
|
||||
rgb(255 255 255 / .07) 54%,
|
||||
transparent 66%);
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
#vw-bereich .wd-karte:hover::before { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Die Ecken sind ungleich gerundet -- diagonal weit, diagonal knapp.
|
||||
Eine gleichmaessig gerundete Kachel liest sich als Knopf; die
|
||||
ungleiche Rundung nimmt die Facetten der Motive auf. */
|
||||
#vw-bereich .wd-karte {
|
||||
border-radius: 36px 6px 36px 6px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#vw-bereich .wd-karte { transition: none; }
|
||||
#vw-bereich .wd-karte {
|
||||
transition: none;
|
||||
transform: none;
|
||||
}
|
||||
#vw-bereich .wd-karte:hover { transform: none; }
|
||||
#vw-bereich .wd-karte > *,
|
||||
#vw-bereich .wd-karte h2,
|
||||
#vw-bereich .wd-karte h3 { transform: none; }
|
||||
#vw-bereich .wd-karte::before { display: none; }
|
||||
}
|
||||
|
||||
/* Der Titel steht als einziges frei auf der Buehne. Damit er das
|
||||
@@ -3762,6 +3846,62 @@
|
||||
} catch (e) { /* aeltere Browser: dann eben nur bei resize */ }
|
||||
})();
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
Die Kacheln neigen sich zum Zeiger.
|
||||
|
||||
Das Grundsystem setzt bereits --wd-lichtx/--wd-lichty in
|
||||
Bildpunkten, gemessen ab der Kachelecke. Fuer eine Neigung braucht
|
||||
es aber einen Wert, der von der Kachelgroesse unabhaengig ist:
|
||||
-1 am linken Rand, +1 am rechten. Sonst wuerde eine breite Kachel
|
||||
staerker kippen als eine schmale, obwohl der Zeiger relativ an
|
||||
derselben Stelle steht.
|
||||
|
||||
Beim Verlassen wird auf 0 zurueckgesetzt -- sonst bliebe die
|
||||
Kachel schraeg stehen, nachdem der Zeiger laengst weg ist.
|
||||
--------------------------------------------------------------------- */
|
||||
(function kachelnNeigen() {
|
||||
try {
|
||||
if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
} catch (e) { return; }
|
||||
|
||||
var offen = false, letzte = null, zx = 0, zy = 0;
|
||||
|
||||
document.addEventListener("pointermove", function (e) {
|
||||
var karte = e.target && e.target.closest
|
||||
? e.target.closest("#vw-bereich .wd-karte") : null;
|
||||
if (!karte) return;
|
||||
letzte = karte; zx = e.clientX; zy = e.clientY;
|
||||
if (offen) return;
|
||||
offen = true;
|
||||
requestAnimationFrame(function () {
|
||||
offen = false;
|
||||
if (!letzte) return;
|
||||
var r = letzte.getBoundingClientRect();
|
||||
if (!r.width || !r.height) return;
|
||||
/* -1 bis +1, Nullpunkt in der Kachelmitte. */
|
||||
var nx = ((zx - r.left) / r.width - 0.5) * 2;
|
||||
var ny = ((zy - r.top) / r.height - 0.5) * 2;
|
||||
letzte.style.setProperty("--vw-nx", nx.toFixed(3));
|
||||
letzte.style.setProperty("--vw-ny", ny.toFixed(3));
|
||||
});
|
||||
}, { passive: true });
|
||||
|
||||
/* pointerout statt mouseleave: Es meldet zuverlaessig auch dann,
|
||||
wenn der Zeiger die Kachel ueber ein Kindelement verlaesst. */
|
||||
document.addEventListener("pointerout", function (e) {
|
||||
var karte = e.target && e.target.closest
|
||||
? e.target.closest("#vw-bereich .wd-karte") : null;
|
||||
if (!karte) return;
|
||||
/* Nur zuruecksetzen, wenn der Zeiger die Kachel WIRKLICH verlaesst
|
||||
und nicht bloss von einem Kind zum naechsten wandert. */
|
||||
if (e.relatedTarget && karte.contains(e.relatedTarget)) return;
|
||||
karte.style.setProperty("--vw-nx", "0");
|
||||
karte.style.setProperty("--vw-ny", "0");
|
||||
if (letzte === karte) letzte = null;
|
||||
}, { passive: true });
|
||||
})();
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
Das Licht folgt dem Zeiger auch auf den Reitern.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user