From 4a08cc361fecba5be7c2c54db50a64cfac9f8d05 Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Mon, 7 Sep 2026 15:30:53 +0200 Subject: [PATCH] Post 7: die Animation ist die Titelslide und traegt deren Ueberschrift Sie ist das erste Element im Carousel, also muss sie die ganze Sache tragen und nicht eine Einzelheit daraus. "Das Formular baust du selbst" beschrieb die Bedienung -- das sieht man in der Animation ohnehin. Fliesstext faellt weg, wie auf jeder Startslide. Damit sitzt die Ueberschrift hoeher, und die Karte muss mit: visBottom 268 statt 168 macht aus 218 px Luft dazwischen 118, den Wert aller anderen Slides. Die drei Pixel Hoehenversatz sind kein Wert aus der Vorlage, sondern stecken bei Post 2 bis 6 im Projektstand als headline.dy -- gesetzt von applyEdits, und da geht das Bewegtbild nicht durch. Gemessen sassen die Startslides bei y 95, diese bei 92. Jetzt beide bei 95: im Stand fuer die Slides, im animSlideBauen fuer die Animation. Dort direkt als transform, weil die Regel hinter --ey an [data-edit] haengt und das Attribut tagEditable() setzt -- noch eine Stelle, die das Bewegtbild auslaesst. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv --- post7.html | 39 ++++++++++++++++++++++++++++++++++++--- state/post7.json | 9 +++++++++ 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/post7.html b/post7.html index 4a4698d..d27dcbf 100644 --- a/post7.html +++ b/post7.html @@ -1460,9 +1460,29 @@ if (location.search.indexOf("nur=anim") >= 0) { key: "animForm", type: "feature", dauer: 6, eyebrow: "Form Builder", - head: 'Das Formular
baust du selbst.', - body: "Frage hinzufügen, Typ wählen, Optionen eintippen. Mehr braucht es nicht.", - vis: "animForm", visW: 896, visLeft: 92, visBottom: 168, + /* Die Ueberschrift des Bewegtbilds ist die Ueberschrift des Beitrags, + denn es ist das erste Element im Carousel. Sie muss also die ganze + Sache tragen und nicht eine Einzelheit daraus. "Das Formular baust du + selbst" stand hier zuerst und beschrieb die Bedienung -- das sieht man + in der Animation ohnehin, und als Aufmacher sagt es nichts darueber, + wozu das gut ist. + + Anders als bei Post 6 gibt es dafuer keine Vorlage: lib/produkt-daten.ts + der Website kennt sechs Produkte, der Form Builder ist keins davon. + Der Satz ist also geschrieben und nicht zitiert. */ + head: 'Anfragen, bei denen
nichts mehr fehlt.', + /* Kein Fliesstext: die Titelslide traegt nur die Ueberschrift, so wie + Slide 1 in Post 6 und die Titel-Slide in Post 4. Der leere body laesst + contentHtml den Absatz ganz weg -- stuende dort ein leerer Absatz, + schoebe sein Zeilenabstand die Zeichnung nach unten. */ + body: "", + /* Weiter oben als die Slides: ohne Fliesstext sitzt die Ueberschrift + hoeher, und mit visBottom 168 klafften 218 px zwischen ihr und der + Karte. 268 macht daraus 118 -- derselbe Wert wie ueberall sonst. Der + gewonnene Platz steht dafuer unten, was hier verkraftbar ist: die + Karte ist am Anfang ohnehin zur Haelfte leer, weil sie den Raum fuer + die spaeter erscheinenden Optionen schon reserviert. */ + vis: "animForm", visW: 896, visLeft: 92, visBottom: 268, }, ]; @@ -5127,6 +5147,19 @@ if (location.search.indexOf("nur=anim") >= 0) content.innerHTML = contentHtml(a, 0); page.appendChild(content); + /* Die Ueberschrift drei Pixel tiefer, wie auf den Startslides von Post 2 + bis 6. Dort steckt der Wert im Projektstand als headline.dy, gesetzt von + applyEdits -- und da geht das Bewegtbild nicht durch, es baut sein Blatt + selbst. Seit es das erste Element im Carousel ist, faellt der + Unterschied auf: gemessen sassen die anderen bei y 95, dieses bei 92. + + Direkt als transform und nicht ueber --ey: die Regel, die daraus eine + Verschiebung macht, haengt an [data-edit], und das Attribut setzt + tagEditable() -- eine weitere Stelle, die das Bewegtbild nicht + durchlaeuft. Mit --ey allein passierte gar nichts. */ + const kopf = content.querySelector(".headline"); + if (kopf) kopf.style.transform = "translateY(3px)"; + const v = document.createElement("div"); v.className = "vis vis-" + a.vis; v.style.cssText = diff --git a/state/post7.json b/state/post7.json index ee6c34e..abf075b 100644 --- a/state/post7.json +++ b/state/post7.json @@ -35,18 +35,27 @@ "dx": 0, "dy": 0 }, + "headline": { + "dy": 3 + }, "vis": { "dx": 0, "dy": -28 } }, { + "headline": { + "dy": 3 + }, "vis": { "dx": 0, "dy": -126 } }, { + "headline": { + "dy": 3 + }, "vis": { "dx": 0, "dy": -162