diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css index a6cd31e0..139ec2b6 100644 --- a/assets/css/webdesign.css +++ b/assets/css/webdesign.css @@ -656,10 +656,14 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { hoechstens fuenf Grad Neigung niemand sieht. */ .wd-karte { transform-style: preserve-3d; + /* --wd-kipp kommt aus dem Skript und haengt an der Kachelgroesse: + kleine Kacheln kippen voll, grosse anteilig weniger. Ohne das + sieht derselbe Winkel bei einer Portfolio-Kachel aus wie das + Kippen des halben Bildschirms. */ transform: perspective(1400px) - rotateX(calc(var(--wd-ny, 0) * -5deg)) - rotateY(calc(var(--wd-nx, 0) * 5deg)); + rotateX(calc(var(--wd-ny, 0) * var(--wd-kipp, 5) * -1deg)) + rotateY(calc(var(--wd-nx, 0) * var(--wd-kipp, 5) * 1deg)); transition: transform .32s cubic-bezier(.2,.8,.3,1), box-shadow .32s ease; @@ -670,8 +674,8 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { .wd-karte:hover { transform: perspective(1400px) - rotateX(calc(var(--wd-ny, 0) * -5deg)) - rotateY(calc(var(--wd-nx, 0) * 5deg)) + rotateX(calc(var(--wd-ny, 0) * var(--wd-kipp, 5) * -1deg)) + rotateY(calc(var(--wd-nx, 0) * var(--wd-kipp, 5) * 1deg)) translateZ(20px); box-shadow: 0 40px 84px -34px rgb(0 0 0 / .92), diff --git a/assets/js/wd-core.js b/assets/js/wd-core.js index 55d0522b..72285187 100644 --- a/assets/js/wd-core.js +++ b/assets/js/wd-core.js @@ -961,6 +961,22 @@ var ny = ((letzte.y - r.top) / r.height - 0.5) * 2; k.style.setProperty("--wd-nx", nx.toFixed(3)); k.style.setProperty("--wd-ny", ny.toFixed(3)); + + /* WIE STARK gekippt wird, haengt an der Groesse der Kachel. + + Bei gleichem Winkel legt eine grosse Kachel an ihren Ecken + viel mehr Weg zurueck als eine kleine -- fuenf Grad sehen + bei einer Preiskachel von 280 Punkten beilaeufig aus und + bei einer Portfolio-Kachel von 1470 Punkten wie ein + Kippen des halben Bildschirms. + + Deshalb ein fester Bezugswert von 420 Punkten: Kacheln bis + dahin kippen voll, groessere anteilig weniger. Nach unten + bei 1,4 Grad begrenzt, damit auch die groesste Kachel noch + erkennbar reagiert und der Effekt nicht einfach ausfaellt. */ + var lang = Math.max(r.width, r.height); + var grad = Math.max(1.4, Math.min(5, 5 * (420 / lang))); + k.style.setProperty("--wd-kipp", grad.toFixed(2)); } }); }, { passive: true }); diff --git a/blickfang-ueber-pc.png b/blickfang-ueber-pc.png index 8b3853c1..76de3a55 100644 Binary files a/blickfang-ueber-pc.png and b/blickfang-ueber-pc.png differ diff --git a/pruef-bewegung.mjs b/pruef-bewegung.mjs index f400f180..65ac0ff0 100644 --- a/pruef-bewegung.mjs +++ b/pruef-bewegung.mjs @@ -42,6 +42,8 @@ const SEITEN = ["index", "leistungen", "ablauf", "portfolio", "ueber", "portal"] srv.listen(4405, async () => { const browser = await chromium.launch(); + const gemessen = []; + console.log("1. NEIGEN SICH DIE KACHELN AUF JEDER SEITE?"); for (const name of SEITEN) { const seite = await browser.newPage({ viewport: { width: 1440, height: 900 } }); @@ -84,11 +86,16 @@ srv.listen(4405, async () => { await seite.mouse.move(ziel.x, ziel.y, { steps: 14 }); await seite.waitForTimeout(600); - const d = await karte.evaluate((e) => ({ - nx: parseFloat(e.style.getPropertyValue("--wd-nx")), - matrix: getComputedStyle(e).transform, - lumen: getComputedStyle(e).getPropertyValue("--wd-lumen").trim(), - })); + const d = await karte.evaluate((e) => { + const r = e.getBoundingClientRect(); + return { + nx: parseFloat(e.style.getPropertyValue("--wd-nx")), + matrix: getComputedStyle(e).transform, + lumen: getComputedStyle(e).getPropertyValue("--wd-lumen").trim(), + kipp: parseFloat(e.style.getPropertyValue("--wd-kipp")), + laengsteSeite: Math.round(Math.max(r.width, r.height)), + }; + }); pruefe(`${name}: die Kachel neigt sich`, d.matrix.startsWith("matrix3d") && !Number.isNaN(d.nx), `nx ${d.nx}`); @@ -98,6 +105,7 @@ srv.listen(4405, async () => { const zahlen = d.matrix.slice(d.matrix.indexOf("(") + 1, -1).split(",").map(Number); const winkel = Math.abs(Math.asin(Math.max(-1, Math.min(1, zahlen[2]))) * 180 / Math.PI); pruefe(`${name}: und bleibt flach genug`, winkel <= 9, winkel.toFixed(1) + " Grad"); + gemessen.push({ seite: name, flaeche: d.laengsteSeite, faktor: d.kipp, winkel }); } /* Beim Verlassen zuruecksetzen. */ @@ -110,6 +118,36 @@ srv.listen(4405, async () => { await seite.close(); } + console.log("\n1b. GROSSE KACHELN KIPPEN WENIGER ALS KLEINE"); + for (const g of gemessen) { + console.log(" " + g.seite.padEnd(11) + " laengste Seite " + + String(g.flaeche).padStart(4) + "px Faktor " + g.faktor + + " " + g.winkel.toFixed(2) + " Grad"); + } + + /* Bei gleichem Winkel legt eine grosse Kachel an ihren Ecken viel + mehr Weg zurueck als eine kleine. Eine Portfolio-Kachel ist ueber + 1400 Punkte hoch -- dort sah derselbe Winkel aus wie das Kippen des + halben Bildschirms. Deshalb skaliert der Faktor mit der Groesse. */ + const gross = gemessen.filter((g) => g.flaeche > 900); + const klein = gemessen.filter((g) => g.flaeche < 500); + if (gross.length && klein.length) { + const groessterGross = Math.max(...gross.map((g) => g.winkel)); + const kleinsterKlein = Math.min(...klein.map((g) => g.winkel)); + pruefe("die grosse Kachel kippt weniger als die kleine", + groessterGross < kleinsterKlein, + groessterGross.toFixed(2) + " Grad gegen " + kleinsterKlein.toFixed(2) + " Grad"); + } else { + pruefe("grosse und kleine Kacheln zum Vergleichen gefunden", false, + gross.length + " grosse, " + klein.length + " kleine"); + } + + /* Nach unten begrenzt, damit der Effekt bei sehr grossen Kacheln + nicht einfach ausfaellt. */ + pruefe("aber auch die groesste reagiert noch sichtbar", + gemessen.every((g) => g.faktor >= 1.4), + "kleinster Faktor " + Math.min(...gemessen.map((g) => g.faktor))); + console.log("\n2. DIE EINBLENDUNG DARF DIE NEIGUNG NICHT LOESCHEN"); const s2 = await browser.newPage({ viewport: { width: 1440, height: 900 } }); await s2.goto("http://127.0.0.1:4405/webdesign/leistungen.html"); diff --git a/pruef-vw-schmuck-computer.png b/pruef-vw-schmuck-computer.png index c0a5f7e9..28c4eec4 100644 Binary files a/pruef-vw-schmuck-computer.png and b/pruef-vw-schmuck-computer.png differ diff --git a/webdesign/sw.js b/webdesign/sw.js index 6fafaeb1..27a0847d 100644 --- a/webdesign/sw.js +++ b/webdesign/sw.js @@ -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-v45"; +const CACHE_NAME = "dogfather-webdesign-v46"; /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE HTML-Datei in dieser Liste. */