Stammtisch am Mittwoch

[Matthias Scharwies]

Guten Morgen,

im Sommer war Gartenzeit, jetzt sitzen wir wieder drinnen und wollen wieder auf unseren Stammtisch aufmerksam machen.

Wir treffen uns am Mittwoch, den 05.11.2025 um 20:00 auf Discord - Dauer ca. 90 Minuten

In den letzten Wochen waren wir immer nur zu dritt oder viert, wäre schön, wenn mal wieder mehr kämen.

Herzliche Grüße
Matthias Scharwies

[Ryuno-Ki]

Moin Matthias,

In den letzten Wochen waren wir immer nur zu dritt oder viert, wäre schön, wenn mal wieder mehr kämen.

Auf Discord wohl kaum 🙈

Gruß,

[Matthias Scharwies]

Guten Morgen,

sorry, dass es so lange mit meiner Zusammenfassung gedauert hat: Wir waren zu sechst und es ging um den OnePager und wie man von Abschnitt zu Abschnitt scrollen kann.

Relativ schnell war klar, dass eine scrollbare Bildergalerie und Lazy loading in einen eigenen Artikel ausgelagert werden sollten.^[1] Und es gab ja bereits ein ToDo:

Hier der neu aufgebaute Artikel:

Bilder präsentieren

Die ersten Beispiele zeigen scrollbare Bildergalerien.^[2]

@Rolf B Ja, ich hätte scroll-button() und scroll-marker von Anfang an in Minimalbeispielen trennen sollen.

• Das erstere sind wirklich mit der Tab-Taste bedienbare Buttons
• Die scroll-marker und scroll-marker-group sind „nur“ visuelle Alternativen von thumb und track des Scrollbalken -
  man kann kann in das Widget hineintabben und dann mit den Pfeiltasten navigieren.

@JürgenB hat eine Steuerung mit JS entwickelt - hier fiel auf, dass beim Einsatz der Pseudo-Elemente das Scrollen deaktiviert wurde. Hier kommt scroll-behavior ins Spiel - mit smooth kann das Scrollen wieder aktiviert, mit auto auf diskreten Wechsel umgestellt werden.

Bildunterschriften

Dieses Kapitel war bereits vorhanden, ich habe hier aber einige Zwischenschritte übersprungen und vor allem den Unterschied Bildunterschrift_vs._Bildbeschreibung besser berücksichtigt.

Lazy Loading

„Das hat ja nichts mit CSS zu tun“ - Trotzdem hatte ich seit Jahren von einem Image Reveal geträumt. Mittlerweile geht das mit reinem CSS. ^[3]

		@keyframes reveal {
			from {
				opacity: 0;
				clip-path: inset(45% 20% 45% 20%);
			}
			to {
				opacity: 1;
				clip-path: inset(0% 0% 0% 0%);
			}
		}

		.image-reveal {
			animation: linear reveal both;
			animation-timeline: view();
			animation-range: entry 25% cover 50%;
		}

„Wirklich?“ - „Ja, wobei alle modernen Scroll-Eigenschaften bis jetzt (Stand: November 2025) nur im Chrome, Edge und Opera gehen. Im Safari und Firefox sieht man aber alle Inhalte - progressive enhancement. Und ich hoffe, dass sie bald nachziehen werden.“

Bertie und ich hoffen, dass wir am nächsten Mittwoch^[4] unseren neuen OnePager vorstellen können. Auch dort sind einige Sachen, die man vorher mit JavaScript programmieren musste, bereits mit CSS möglich!

Könnte jemand bis dahin bitte diesen Artikel durchlesen und Anregungen und Kritikpunkte sammeln?

Herzliche Grüße
Matthias Scharwies

---

1. Kurzfristig war der Bildwechsler im Gespräch, aber da ging es ja um eine Lightbox mit dialog. ↩︎

2. Wir hatten mehrere Sets von mehr oder weniger schönen Rastergrafiken. @Bertie hat hier ein neues Set von Landschaftsbildern angelegt, die als SVG mit 10KB viel leichter als irgendwelche JGPs sind. ↩︎

3. Hat jemand eine Idee, ob – und wenn ja, wie - man die figcaptions auch animieren sollte? ↩︎

4. Ich fahre jetzt 3 Tage ins Schullandheim in die Hersbrucker Schweiz! ↩︎